js中如何实现倒计时

最新推荐文章于 2024-01-24 15:24:22 发布

原创最新推荐文章于 2024-01-24 15:24:22 发布 · 379 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #servlet #java

前端js 专栏收录该内容

7 篇文章

订阅专栏

这篇博客通过HTML和JavaScript展示了如何创建一个简单的计数器应用。用户点击开始按钮，计数器从10开始递减，每秒减少1，直到计数器归零。当点击结束按钮时，定时器停止，计数器不再变化。点击开始按钮可以重新启动计数器。

<div id="active">10</div>                          //设置一个数字
       <button id="btn">开始</button>       //设置一个按钮
       <script>
           var _active=document.querySelector("#active");
           var _btn=document.querySelector("#btn");
           var id; //记录第一次生成的标识
           _btn.onclick=function(){                      //点击之后
               var info=_btn.innerText;
               var count=_active.innerText;
               //如果点击开始，开始改为结束
               if(info=="开始"){
                   _btn.innerText="结束";
                   id=setInterval(function(){
                          count--;
                          //重新写入
                          _active.innerText=count;
                   },1000)
               }
               //点击结束，清空定时器
               if(info=="结束"){
                   _btn.innerText="开始";
                   clearInterval(id);
               }

           }



       </script>