先看效果：
HTML代码：
<!doctype html><html><head><meta charset="utf-8"><title>拟物时钟-夜间模式切换</title><link rel="stylesheet" href="style.css"></head><body><div class="clock"><div class="hour"><div class="hr" id="hr"></div></div><div class="min"><div class="mn" id="mn"></div></div><div class="sec"><div class="sc" id="sc"></div></div></div><div class="toggleClass" onclick="toggleClass()"></div><script type="text/javascript">function toggleClass(){const body = document.querySelector('body');body.classList.toggle('light');}const deg = 6;const hr = document.querySelector('#hr');const mn = document.querySelector('#mn');const sc = document.querySelector('#sc');setInterval(() => {let day = new Date();let hh = day.getHours() * 30;let mm = day.getMinutes() * deg;let ss = day.getSeconds() * deg;hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;mn.style.transform = `rotateZ(${mm}deg)`;sc.style.transform = `rotateZ(${ss}deg)`;})</script></body></html>
CSS
* {margin: 0;padding: 0;box-sizing: border-box;}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #091921;}body.light {background: #d1dae3;}.clock {width: 350px;height: 350px;display: flex;justify-content: center;align-items: center;background: #091921 url(clock.PNG);background-size: cover;border: 4px solid #091921;border-radius: 50%;box-shadow: 0 -15px 15px rgba(255, 255, 255, .05), inset 0 -15px 15px rgba(255, 255, 255, .05), 0 15px 15px rgba(0, 0, 0, .3), inset 0 15px 15px rgba(0, 0, 0, .3);}body.light .clock {background: #d1dae3 url(clock.PNG);background-size: cover;border: 4px solid #cad3dc;box-shadow: -8px -8px 15px rgba(255, 255, 255, .5), inset -9px -8px 15px rgba(255, 255, 255, .5), 10px 10px 10px rgba(0, 0, 0, .1), inset 10px 10px 10px rgba(0, 0, 0, .1);}.clock::before {content: '';position: absolute;width: 15px;height: 15px;background: #fff;border-radius: 50%;z-index: 100000;}body.light .clock::before {background: #008eff;}.hour, .min, .sec {position: absolute;}.hour, .hr {width: 160px;height: 160px;}.min, .mn {width: 190px;height: 190px;}.sec, .sc {width: 230px;height: 230px;}.hr, .mn, .sc {display: flex;justify-content: center;position: absolute;border-radius: 50%;}.hr::before {content: '';position: absolute;width: 8px;height: 80px;background: #ff105e;z-index: 10;border-radius: 6px 6px 0 0;}.mn::before {content: '';position: absolute;width: 4px;height: 90px;background: #fff;z-index: 11;border-radius: 6px 6px 0 0;}body.light .mn::before {background: #091921;}.sc::before {content: '';position: absolute;width: 2px;height: 150px;background: #008eff;z-index: 12;border-radius: 6px 6px 0 0;}.toggle {position: absolute;top: 30px;right: 150px;width: 20px;height: 20px;font-size: 18px;border-radius: 50%;background: #d1dae3;color: #d1dae3;font-family: consolas;cursor: pointer;left: 25px;white-space: nowrap;}.toggleClass {position: absolute;top: 30px;right: 150px;width: 20px;height: 20px;font-size: 18px;border-radius: 50%;background: #d1dae3;color: #d1dae3;font-family: concolas;cursor: pointer;display: flex;align-items: center;}.toggleClass:before {position: absolute;left: 25px;content: "日间模式";white-space: nowrap;}body.light .toggleClass {background: #091921;color: #091921;}body.light .toggleClass:before {content: "夜间模式";}
