倒计时

最新推荐文章于 2024-06-12 14:02:38 发布

liantaiyou

最新推荐文章于 2024-06-12 14:02:38 发布

阅读量75

点赞数 2

本文链接：https://blog.csdn.net/liantaiyou/article/details/103321492

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #box{
        width: 300px;height: 300px;border:2px solid orangered;margin:100px auto;
        font-size: 80px;line-height: 300px;text-align: center;
    }
    #btn{
        width: 200px;height: 80px;background: #333333;margin:10px auto;display: block;
        font-size: 30px;
   }
    </style>
</head>
<body>
    <div id="box">5</div>
    <input type="button" id="btn" value="开始" >
</body>
<script>
var box=document.getElementById("box")
var btn=document.getElementById("btn")

var t;
//i=0表示初始状态 i=1表示暂停，i=2表示复位
var i=0;
var num=box.innerHTML;
var start=box.innerHTML;
btn.onclick=function(){
    clearInterval(t);
    if(i==0){     
  t= setInterval(function(){     
      if(num<=0){
        clearInterval(t);
        btn.value="复位";
        i=2;
        // num=0;
      }else{
        num--;
      }
    
   box.innerHTML=num;
   },1000);
   //状态改成下次的功能
   btn.value="暂停";
   i=1;
}
else if(i==1){
    //执行暂停的功能
    clearInterval(t);
    //状态改为继续
btn.value="继续"
i=0
}
else if(i==2){
//执行复位的功能
box.innerHTML=start;
num=start;
btn.value="开始"
i=0;
}
}
</script>
</html>