效果如下：
代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>现代风格时钟</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
transition: background-color 0.5s;
}
.clock-container {
display: flex;
flex-direction: column;
align-items: center;
}
.clock {
position: relative;
width: 200px;
height: 200px;
/*将正方形变为圆形*/
border-radius: 50%;
background-color: white;
border: 1px solid black;
/*添加阴影*/
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
/*实现时针、分针、秒针绕圆心转动*/
.hand {
/*圆心定位*/
position: absolute;
bottom: 50%;
left: 50%;
/* 设置旋转元素的基点位置 ,即旋转轴的位置*/
transform-origin: 50% 100%;
/*倒圆角*/
border-radius: 5px;
}
/*时针*/
.hour {
width: 4px;
height: 50px;
background-color: #333;
}
/*分针*/
.minute {
width: 3px;
height: 70px;
background-color: #666;
}
/*秒针*/
.second {
width: 2px;
height: 90px;
background-color: #e74c3c;
}
.center {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
transform: translate(-50%, -50%);
}
.digital-time {
font-size: 48px;
margin-top: 20px;
color: #333;
}
.mode-switch {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.mode-switch:hover {
background-color: #555;
}
.night-mode {
background-color: #222;
}
.night-mode .clock {
background-color: #333;
box-shadow: 0 0 20px rgba(255,255,255,0.1);
}
.night-mode .hour, .night-mode .minute {
background-color: #fff;
}
.night-mode .second {
background-color: #e74c3c;
}
.night-mode .center {
background-color: #fff;
}
.night-mode .digital-time {
color: #fff;
}
.night-mode .mode-switch {
background-color: #f0f0f0;
color: #333;
}
.night-mode .mode-switch:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="clock-container">
<div class="clock">
<div class="hand hour"></div>
<div class="hand minute"></div>
<div class="hand second"></div>
<div class="center"></div>
</div>
<div class="digital-time"></div>
<button class="mode-switch">Dark mode</button>
</div>
<script>
function updateClock() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const hourDeg = (hours % 12 + minutes / 60) * 30; // 总共360度，一圈是12个小时，那么一个小时30度
const minuteDeg = (minutes + seconds / 60) * 6; // 总共360度，一圈是60分钟，那么一分钟6度
const secondDeg = seconds * 6; // 总共360度，一圈是60秒，那么一秒钟6度
// 让时针转动
document.querySelector('.hour').style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
// 让分针转动
document.querySelector('.minute').style.transform = `translateX(-50%) rotate(${minuteDeg}deg)`;
// 让秒针转动
document.querySelector('.second').style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;
// 显示时间
const digitalTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')} ${hours >= 12 ? 'PM' : 'AM'}`;
document.querySelector('.digital-time').textContent = digitalTime;
}
// 切换模式
function toggleMode() {
// 使用document.body.classList.toggle('night-mode');的时候,当前元素body有'night-mode'这个类名时删除这个类名,反之没有这个类名则添加这个类名到classList的后面
document.body.classList.toggle('night-mode');
const button = document.querySelector('.mode-switch'); // 选择按钮
button.textContent = document.body.classList.contains('night-mode') ? 'Light mode' : 'Dark mode'; // 修改内容
}
setInterval(updateClock, 1000); // 1000毫秒，即1s钟执行一次
// updateClock(); // 立即更新一次,避免延迟
// 监听单击事件，即单击就切换模式
document.querySelector('.mode-switch').addEventListener('click', toggleMode);
</script>
</body>
</html>
标签：网页,color,50%,mode,background,night,const,时钟 From： https://www.cnblogs.com/zwh0910/p/18455738