深色UI模拟时钟JavaScript失效问题求助（附完整代码）

我帮你找出了两个关键问题，修复后时钟就能正常运转了：

问题1：日期方法调用错误 #

你在获取分钟和秒数的时候，忘记给getMinutes()和getSeconds()加括号了！这两个是方法，必须加括号才能返回对应的数值，否则你拿到的是函数本身，计算出来的角度会是NaN，指针自然不会动。

原代码里的错误行：

let mm = day.getMinutes * deg;
let ss = day.getSeconds * deg;

问题2：缺少实时更新逻辑 #

当前代码只在页面加载时执行一次，不会定时刷新时间。要让时钟持续走起来，需要用setInterval每一秒更新一次指针的角度。

修正后的完整JavaScript代码 #

const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');

// 封装更新时钟的函数
function updateClock() {
  let day = new Date();
  let hh = day.getHours() * 30; // 时针每小时走30度（360/12）
  let mm = day.getMinutes() * deg; // 分针每分钟走6度（360/60）
  let ss = day.getSeconds() * deg; // 秒针每秒走6度

  hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`; // 时针要跟着分针微调
  mn.style.transform = `rotateZ(${mm}deg)`;
  sc.style.transform = `rotateZ(${ss}deg)`;
}

// 页面加载时先执行一次，然后每1秒更新一次
updateClock();
setInterval(updateClock, 1000);

额外小提示 #

你的CSS里有个小语法错误：box-shadow里的+15px应该去掉加号，改成15px，否则阴影样式可能不生效：

box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05), 
            inset 0 -15px 15px rgba(255, 255, 255, 0.05), 
            0 15px 15px rgba(0, 0, 0, 0.05), 
            inset 0 15px 15px rgba(0, 0, 0, 0.05);

现在把修正后的代码替换掉你原来的脚本，再修复CSS里的阴影问题，本地运行后时钟就能正常走动啦！

内容的提问来源于stack exchange，提问作者Stay Foolish