JavaScript 原生小案例秒杀时钟倒计时

最新推荐文章于 2022-10-07 11:55:19 发布

weixin_33887443

最新推荐文章于 2022-10-07 11:55:19 发布

阅读量309

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c432bd0e51d450672354221

版权

功能介绍：

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>复制代码

weixin_33887443

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript 原生小案例秒杀时钟倒计时

功能介绍：1.时/分/秒倒计时直至为零&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;倒计时&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫