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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)