倒数 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            font-size:60px;
            text-align: center;
            background-color: red;
            margin: 300px auto 0px;
            line-height:200px;
        }
       #btn1{
           margin: 0 auto;
           display: block;
           height:50px;
           width: 100px;
       }
    </style>
</head>
<body>
<div id="txt">
5
</div>
<input type="button" value="开始" id="btn1">

</body>
<script>
    var oTxt=document.getElementById("txt");
    var oBtn1=document.getElementById("btn1");
    var start=oTxt.innerHTML
    var i=1; //相当于开关，不同的值控制不同的功能
    var num=oTxt.innerHTML///初始值为用户设置的倒计时值
    var t;//设置为全局变量，方便各个功能调用。
    oBtn1.onclick=function () {
        clearInterval(t)//定时器开始之前先清除
        if(i==1){//当i为1时，执行倒数操作
             t=setInterval(function () {

                 console.log(num)
                if(num==1){ //倒数到0之后，设置复位操作
                    num="over"//不显示0，而显示over
                    oBtn1.value="复位"
                    i=3;
                    clearInterval(t) //清除计时器
                }
                else {
                    num=num-1;
                }
                 oTxt.innerHTML=num //变化的值显示在盒子中

            },1000);
            oBtn1.value="暂停"//执行后按钮状态设置为下次要进行的操作
            i=2;//同时把开关设置为下一次执行的条件
        }
        else if(i==2){//i为2时，清除定时器
            clearInterval(t)
            oBtn1.value="继续";//执行后按钮状态设置为下次要进行的操作
            i=1;//同时把开关设置为下一次执行的条件
        }
        else if(i==3){ //倒数到0时，开始执行这个操作
            oTxt.innerHTML=start;//盒子里的值恢复到默认值
            num=start;  //num也恢复到原来的值
            oBtn1.value="开始"
            i=1  //重新开始倒数操作
        }

    }

</script>
</html>

看似简单，但是初学者写起来还是挺难的。逻辑不能乱

posted @ 2019-08-23 16:29  菜鸟小何  阅读(145)  评论(0)    收藏  举报