您好,欢迎来到欧热游戏网。
搜索
您的当前位置:首页js如何实现简单的时分秒倒计时效果(代码示例)

js如何实现简单的时分秒倒计时效果(代码示例)

来源:欧热游戏网
 本篇文章给大家带来的内容是介绍js如何实现简单的时分秒倒计时效果(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

效果:

javascript:

 <script type="text/javascript">
 function countTime() {
 //获取当前时间
 var date = new Date();
 var now = date.getTime();
 //设置截止时间
 var endDate = new Date("2018-10-25 00:00:00");
 var end = endDate.getTime();
 //时间差
 var differTime = end - now;
 //定义变量,h,m,s保存倒计时的时间
 var h, m, s;
 if (differTime >= 0) {
 h = Math.floor(differTime / 1000 / 60 / 60);
 m = Math.floor(differTime / 1000 / 60 % 60);
 s = Math.floor(differTime / 1000 % 60);
 h = h < 10 ? ("0" + h) : h;
 m = m < 10 ? ("0" + m) : m;
 s = s < 10 ? ("0" + s) : s;
 document.getElementById("_h").innerHTML = h + "时";
 document.getElementById("_m").innerHTML = m + "分";
 document.getElementById("_s").innerHTML = s + "秒";
 setTimeout(countTime, 1000);

 } else {
 document.getElementById("_h").innerHTML = "00时";
 document.getElementById("_m").innerHTML = "00分";
 document.getElementById("_s").innerHTML = "00秒";
 }


 }
 </script>

HTML: 

<body onload="countTime()">
 <p class="timer">
 <span id="_h"></span>
 <span id="_m"></span>
 <span id="_s"></span>
 </p>
</body>

Copyright © 2019- orde.cn 版权所有

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务