基于JavaScript实现简易倒计时功能:天、时、分、秒展示

作者:木棉

时间:2026-10-22

浏览:142

本文提供一段基于JavaScript的简易倒计时实现代码,支持显示天、时、分、秒。通过获取目标时间戳并每秒更新DOM元素,实现动态倒计时效果。代码包含HTML结构示例与JS逻辑,适用于简单的活动或任务截止提醒场景。

文章目录

JavaScript倒计时代码实现

以下直接展示实现该倒计时效果的核心代码。


<script>
 (function () {
  var tian = document.getElementsByClassName('JS-tian')[0];
  var shi = document.getElementsByClassName('JS-shi')[0];
  var fen = document.getElementsByClassName('JS-fen')[0];
  var miao = document.getElementsByClassName('JS-miao')[0];
  var endTime = new Date('2117/07/12 23:59:59').getTime() + 1000;
  var interval = null;
  interval = setInterval(function () {
   var syhm = endTime - Date.now(); // 剩余毫秒
   if (syhm >= 0) {
    tian.innerText = Math.floor(syhm / 1000 / 60 / 60 / 24);
    shi.innerText = Math.floor(syhm / 1000 / 60 / 60 % 24);
    fen.innerText = Math.floor(syhm / 1000 / 60 % 60);
    miao.innerText = Math.floor(syhm / 1000 % 60);
   } else {
    clearInterval(interval);
   }
  }, 0);
 })();
</script>

HTML结构示例:


<div>
 距结束还剩:<span class="JS-tian"></span>天<span class="JS-shi"></span>时<span class="JS-fen"></span>分<span class="JS-miao"></span>秒
</div>

上述内容介绍了利用JavaScript代码实现简易倒计时(包含天、时、分、秒)的方法,希望能为读者提供实际帮助。若在使用过程中遇到任何问题,欢迎留言咨询,作者将尽快回复。同时,感谢各位对本站的支持与关注。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章