如何为现有JavaScript数字时钟添加按小时切换元素类标记已过时段的功能

实现方案 #

你只需要在现有updateClock函数末尾新增一段时段标记逻辑即可，完整修改后的代码如下：

Number.prototype.pad = function(n) {
  for (var r = this.toString(); r.length < n; r = 0 + r);
  return r;
};

function updateClock() {
  var now = new Date();
  var milli = now.getMilliseconds(),
    sec = now.getSeconds(),
    min = now.getMinutes(),
    hou = now.getHours(),
    mo = now.getMonth(),
    dy = now.getDate(),
    day = now.getDay(),
    yr = now.getFullYear();
  var months = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
  var days = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];

  var tags = ["mon", "d", "y", "h", "m", "s", "mi", "day"],
    corr = [months[mo], dy, yr, hou.pad(2), min.pad(2), sec.pad(2), milli.pad(3), days[day]];
  for (var i = 0; i < tags.length; i++)
    document.getElementById(tags[i]).firstChild.nodeValue = corr[i];
    
  if(hou < 12){var ampm = "MORNING"}
  if(hou >= 12 && hou <= 18){var ampm = "AFTERNOON"}
  if(hou > 18){var ampm = "EVENING"}
  document.getElementById("ampm").innerHTML = ampm;

  // 新增：时段标记逻辑
  for (let i = 1; i <= 24; i++) {
    const dot = document.getElementById(`d${i}`);
    if (!dot) continue;
    // 匹配你的需求：<=当前小时的元素为橙色（future类），其余为白色（past类）
    if (i <= hou) {
      dot.classList.remove('past');
      dot.classList.add('future');
    } else {
      dot.classList.remove('future');
      dot.classList.add('past');
    }
  }
}

function initClock() {
  updateClock();
  // 原1ms更新频率过高，可改成1000ms每秒更新一次不影响功能，性能更好
  window.setInterval("updateClock()", 1000);
}

补充说明 #

• 逻辑完全匹配你的需求：当前为6点时，d1到d6元素加future类显示橙色，剩余元素加past类显示白色
• 加了元素存在性判断，即使你d1-d24的元素没写全也不会报错
• 原代码的1ms定时器太过消耗性能，建议改成示例中的1000ms（每秒更新一次）即可满足需求

内容的提问来源于stack exchange，提问作者nobi-wan