JavaScript实现秒杀时钟倒计时
更新时间:2019年09月29日 08:31:12 作者:小羽向前跑
这篇文章主要为大家详细介绍了JavaScript实现秒杀时钟倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现秒杀时钟倒计时的具体代码,供大家参考,具体内容如下
功能介绍:
1.时/分/秒倒计时直至为零
所有代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>倒计时</title> <style type="text/css"> *{ margin:0; padding:0; } span{ display: inline-block; width: 60px; height: 60px; border-radius: 50%; background: black; color: white; font-size: 30px; text-align: center; line-height: 60px; } i{ font-style: normal; font-size: 20px; } </style> </head> <body> <span id="hs">1</span> <i>:</i> <span id="ms">59</span> <i>:</i> <span id="ss">47</span> </body> </html> <script type="text/javascript"> //倒计时 var count = 1; var Counter; function countDown(){ //调用 Counter = setInterval(f,1000); } countDown(); //自运行 //倒计时 function f(){ var hs = Number(document.getElementById("hs").innerHTML); var ms = Number(document.getElementById("ms").innerHTML); var ss = Number(document.getElementById("ss").innerHTML); if(hs==0&&ms==0&&ss==0||ss>60||ms>60||hs>24){ var hs = document.getElementById("hs").innerHTML = "00"; var ms = document.getElementById("ms").innerHTML = "00"; var ss = document.getElementById("ss").innerHTML = "00"; clearInterval(Counter); console.log(count); return; } if(ss>0){ ss--; document.getElementById("ss").innerHTML = ss; count++; } if(ss==0){ if(ms>0){ ms--; document.getElementById("ms").innerHTML = ms; document.getElementById("ss").innerHTML = 59; } } if(ms==0){ if(hs>0){ hs--; document.getElementById("hs").innerHTML = hs; document.getElementById("ms").innerHTML = 59; } } } </script>
更多JavaScript时钟特效点击查看:JavaScript时钟特效专题
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
下面小编就为大家带来一篇浅谈js在html中的加载执行顺序,多个jquery ready执行顺序。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-11-11Makefile/cmake/node-gyp中区分判断不同平台的方法
今天小编就为大家分享一篇关于Makefile/cmake/node-gyp中区分判断不同平台的方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧2018-12-12JavaScript遍历Json串浏览器输出的结果不统一问题
json串属于javascript的一个对象,有键和值对应的对象。这篇文章主要介绍了JavaScript遍历Json串浏览器输出的结果不统一问题的相关资料,需要的朋友可以参考下2016-11-11
最新评论