这篇文章主要为大家详细介绍了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>1</span> <i>:</i> <span>59</span> <i>:</i> <span>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时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: