如何在HTML代码的指定位置显示倒计时脚本的输出

1. 调整目标位置的HTML代码 #

只需要把原HTML里标注要放计时器的文本替换为承载计时器的元素，给它加上id="demo"和原计时器脚本匹配即可，修改后的代码如下：

<div class="flash-infos">   
  <div class="flash-info">
    <font color="white" font size=2 ><b id="demo"></b></font> <center>
  </div>    
</div>

2. 计时器脚本调整说明 #

你找到的原有JS脚本不需要改动核心逻辑，唯一需要注意的是要把脚本放在上面的HTML代码之后加载，否则会因为页面还没渲染出对应元素，导致找不到id="demo"的节点报错。
如果你想自定义承载元素的ID，也可以把JS里所有的document.getElementById("demo")里的demo改成你自定义的ID值即可。

注意：原脚本里的倒计时目标日期是2022年1月5日，现在运行会直接显示EXPIRED，请记得把var countDownDate = new Date("Jan 5, 2022 15:37:25").getTime()里的日期替换为你实际需要的倒计时截止时间。

完整可运行示例 #

<!DOCTYPE html>
<html>
<body>
<!-- 你要放计时器的位置代码 -->
<div class="flash-infos">   
  <div class="flash-info">
    <!-- 加了背景色是为了让白色文字可见，可根据自己的页面风格删除 -->
    <font color="white" style="background:#000;" font size=2 ><b id="demo"></b></font> <center>
  </div>    
</div>
<!-- 计时器脚本放在HTML后面 -->
<script>
// 这里替换成你自己的倒计时截止日期
var countDownDate = new Date("Jan 5, 2025 15:37:25").getTime();

var x = setInterval(function() {
  var now = new Date().getTime();
  var distance = countDownDate - now;
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "已过期";
  }
}, 1000);
</script>
</body>
</html>

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