基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果

更新时间：2017年07月13日 09:15:42 作者：九转十指

这篇文章主要介绍了基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果,需要的朋友可以参考下

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<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>

htmlDemo:

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

以上所述是小编给大家介绍的基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

js
倒计时

asp.net刷新本页面的六种方法总结
本篇文章主要是对asp.net刷新本页面的六种方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
underscore 防抖技巧学习示例
这篇文章主要为大家介绍了underscore 防抖技巧学习示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
JavaScript使用简单正则表达式的数据验证功能示例
这篇文章主要介绍了JavaScript使用简单正则表达式的数据验证功能,结合实例形式分析了JS针对表单输入内容的简单正则验证操作技巧,需要的朋友可以参考下
2017-01-01
JavaScript中ES6规范中let和const的用法和区别
这篇文章主要介绍了JavaScript中ES6规范中let和const的用法和区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
JS的事件绑定深入认识
类似于JQuery的这样js库已经实现了很好的数据绑定机制的封装效果，但只知其然，不知其所以然还有会有种蒙在鼓里的感觉，亲自去分析一下具体的实现，会有一种豁然开朗的感觉
2014-06-06
js验证上传图片的方法
这篇文章主要介绍了js验证上传图片的方法,可对上传图片的类型、大小等进行限制,非常简单实用,需要的朋友可以参考下
2015-05-05
纯Javascript实现ping功能的方法
这篇文章主要介绍了纯Javascript实现ping功能的方法,实例分析了javascript实现ping功能的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
Javascript 学习书推荐
前一段时间看了一本javascript的书，书名为Javascript DOM 高级程序设计由【加】Jeffrey Sambells和【美】
2009-06-06
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
打地鼠小游戏大家都喜欢玩，本文是以html编写的，并且使用HBulider软件进行编写的，下面通过本文给大家分享基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解，需要的朋友参考下吧
2017-11-11
浅谈通过JS拦截 pushState和replaceState事件
下面小编就为大家带来一篇浅谈通过JS拦截 pushState和replaceState事件。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07