如何制作不显示天数、支持超24小时显示的倒计时计时器？

你的代码主要存在两个核心问题：

1. 总小时数计算逻辑错误，误用逗号运算符导致结果完全偏离预期
2. 未处理天数元素的显示逻辑，仍会展示多余的天数位

以下是修复后的完整代码：

(function () {
  var deadline = '2022/09/07 00:00';

  // 补零函数：数字长度不足指定长度时前置补0，超过则原样返回
  function pad(num, size) {
    return num.toString().padStart(size, '0');
  }

  // 修复Safari的Date.parse兼容性问题
  function parseDate(date) {
    const parsed = Date.parse(date);
    if (!isNaN(parsed)) return parsed;
    return Date.parse(date.replace(/-/g, '/').replace(/[a-z]+/gi, ' '));
  }

  function getTimeRemaining(endtime) {
    let total = parseDate(endtime) - Date.parse(new Date());
    let seconds = Math.floor((total / 1000) % 60);
    let minutes = Math.floor((total / 1000 / 60) % 60);
    let hours = Math.floor((total / (1000 * 60 * 60)) % 24);
    let days = Math.floor(total / (1000 * 60 * 60 * 24));

    return { total, days, hours, minutes, seconds };
  }

  function clock(id, endtime) {
    let days = document.getElementById(id + '-days');
    let hours = document.getElementById(id + '-hours');
    let minutes = document.getElementById(id + '-minutes');
    let seconds = document.getElementById(id + '-seconds');

    // 隐藏天数元素，符合需求中"不显示天数"的要求
    if (days) days.style.display = 'none';

    var timeinterval = setInterval(function () {
      var time = getTimeRemaining(endtime);

      if (time.total <= 0) {
        clearInterval(timeinterval);
        // 倒计时结束后重置显示为00:00:00
        hours.innerHTML = '00';
        minutes.innerHTML = '00';
        seconds.innerHTML = '00';
      } else {
        // 计算总小时数：天数转小时 + 当前剩余小时
        const totalHours = time.days * 24 + time.hours;
        hours.innerHTML = pad(totalHours, 2);
        minutes.innerHTML = pad(time.minutes, 2);
        seconds.innerHTML = pad(time.seconds, 2);
      }
    }, 1000);
  }

  clock('js-clock', deadline);
})();

关键修改说明： #

• 修正总小时数计算：移除错误的逗号运算符，用time.days * 24 + time.hours直接得到正确的总小时数
• 优化补零逻辑：使用padStart替代字符串截取，避免小时数超过两位时出现截断错误
• 隐藏天数元素：通过style.display = 'none'隐藏多余的天数显示位，满足需求格式
• 完善结束状态：倒计时结束后清空计时器并重置显示，提升交互完整性

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