基于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 秒效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • flexible.js实现移动端rem适配方案

    flexible.js实现移动端rem适配方案

    这篇文章主要介绍了flexible.js实现移动端rem适配方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • JavaScript中判断函数、变量是否存在

    JavaScript中判断函数、变量是否存在

    这篇文章主要介绍了JavaScript中判断函数、变量是否存在,本文给出了多个判断函数是否存在的方法,并分别给出代码实例,需要的朋友可以参考下
    2015-06-06
  • 超轻量级的js时间库miment使用解析

    超轻量级的js时间库miment使用解析

    这篇文章主要介绍了超轻量级的js时间库miment使用解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 基于javascript实现表格的简单操作

    基于javascript实现表格的简单操作

    这篇文章主要为大家详细介绍了基于javascript实现表格的简单操作,具有一定的参考价值,感兴趣的朋友可以参考一下
    2016-05-05
  • js replace替换所有匹配的字符串

    js replace替换所有匹配的字符串

    这篇文章主要介绍了js replace替换所有匹配的字符串,需要的朋友可以参考下
    2014-02-02
  • 移动端吸顶fixbar的解决方案详解

    移动端吸顶fixbar的解决方案详解

    这篇文章主要介绍了移动端吸顶fixbar的解决方案详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • js实现滚动条自动滚动

    js实现滚动条自动滚动

    这篇文章主要为大家详细介绍了js实现滚动条自动滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • Webpack devServer中的 proxy 实现跨域的解决

    Webpack devServer中的 proxy 实现跨域的解决

    这篇文章主要介绍了Webpack devServer中的 proxy 实现跨域的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 简单实用的反馈表单无刷新提交带验证

    简单实用的反馈表单无刷新提交带验证

    表单无刷新提交带验证,非常适用于反馈,具体的实现如下包含各个功能代码,喜欢的朋友可以参考下
    2013-11-11
  • JavaScript中 Promise 的使用技巧

    JavaScript中 Promise 的使用技巧

    这篇文章主要介绍了JavaScript中 Promise 的使用技巧,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08

最新评论