如何修改w3schools倒计时代码实现按规则显示计时启动后已过时间

云原生阿岚

2026-10-5

正计时功能实现方案

核心修改点

将原来的倒计时结束时间变量替换为计时启动的初始时间戳，不需要额外加时长
已过时间计算逻辑改为 当前时间戳 - 初始启动时间戳，替换原代码中的错误加法逻辑
新增分段显示规则判断：仅当对应时间单位数值大于0，或存在更高层级的时间单位时才展示该单位，符合需求
移除原倒计时的过期停止逻辑，正计时默认持续运行，如有停止需求可自行添加触发条件

完整可运行代码

<!-- 正计时显示容器 -->
<p id="demo"></p>

<script>
// 记录计时启动的初始时间戳
var startTime = new Date().getTime();
var timer = setInterval(function() {
  var now = new Date().getTime();
  // 计算已过的毫秒数
  var passedTime = now - startTime;

  // 计算各时间单位数值
  var days = Math.floor(passedTime / (1000 * 60 * 60 * 24));
  var hours = Math.floor((passedTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((passedTime % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((passedTime % (1000 * 60)) / 1000);

  // 按规则拼接显示内容
  var displayText = '';
  if (days > 0) displayText += days + 'd ';
  if (hours > 0 || days > 0) displayText += hours + 'h ';
  if (minutes > 0 || hours > 0 || days > 0) displayText += minutes + 'm ';
  displayText += seconds + 's';

  document.getElementById("demo").innerHTML = displayText;
}, 1000);
</script>