如何用JavaScript在指定时分区间（如14:15-16:15）为div添加类？

核心思路是把时间转换为当日总分钟数来比较，这样就能精确到分钟级别的区间判断，不用单独处理小时和分钟的复杂逻辑。

修改后的完整代码 #

JavaScript 代码

// 获取当前时间的小时与分钟
const now = new Date();
const currentHours = now.getHours();
const currentMinutes = now.getMinutes();
// 转换为当日累计分钟数，方便区间比较
const currentTotalMinutes = currentHours * 60 + currentMinutes;

// 定义目标区间的累计分钟数（示例：14:15 至 16:15）
const intervalStart = 14 * 60 + 15;
const intervalEnd = 16 * 60 + 15;

if (document.body) {
  const targetDiv = document.getElementById("div1");
  if (currentTotalMinutes >= intervalStart && currentTotalMinutes <= intervalEnd) {
    // 使用classList.add避免重复添加类名
    targetDiv.classList.add("active");
  } else {
    // 可选：不在区间时移除类，确保状态正确
    targetDiv.classList.remove("active");
  }
}

HTML 代码

<div id="div1">
</div>

关键说明 #

• 总分钟数转换：把小时乘以60加上分钟，将时分合并为一个整数，比如14:15就是14*60+15=855，16:15就是16*60+15=975，直接比较数值大小就能判断当前时间是否在区间内
• 类名操作优化：用classList.add()替代直接拼接className，可以避免多次执行代码时重复添加active类
• 可选的状态重置：添加classList.remove()逻辑，确保当当前时间超出区间时，元素能移除active类，恢复初始状态

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