js 简单的倒计时

Posted Cupid

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 简单的倒计时相关的知识,希望对你有一定的参考价值。

js 简单的倒计时

<html>
<head>
<meta charset="UTF-8">
<title>简单倒计时</title>
<style>
    #box{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        text-align: center;
        font-size: 20px;
        line-height: 100px;
        margin-bottom: 10px;
    }
</style>
</head>
<body>
    <div id="box">23</div>
    <input type="button" value="开始" id="start">
    <input type="button" value="暂停" id="end">
</body>
<script>
    var obox=document.getElementById("box");
    var oS=document.getElementById("start");
    var oE=document.getElementById("end")
    var t;  // 把计数器的输出定义为全局变量
    //绑定开始的点击事件
     oS.onclick=function(){
         //先清除计时器(清除的是上一个(历史计时器))
         clearInterval(t)
         //开启计时器
         t=setInterval(function(){
             //判断小于0时,计时器停止
             if(obox.innerHTML<=0){
                 clearInterval(t)
             }else{
                 //否则计时器一秒减1
                 obox.innerHTML--;
             }
         },1000)
     }
     //绑定暂停的点击事件
     oE.onclick=function(){
         clearInterval(t)
     }
</script>
</html>

以上是关于js 简单的倒计时的主要内容,如果未能解决你的问题,请参考以下文章

js倒计时代码还剩多少天

js实现拍简单倒计时功能

python使用上下文对代码片段进行计时,非装饰器

js循环倒计时代码 每5秒循环倒计时到0 再从5秒开始 到0之后刷新页面 类似网易的滚动新闻

js简单时分秒倒计时

简单的JS钟表计时