注册登录

js实现简单的倒计时 

<!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:200px;height:200px;margin: 30px auto;border: solid 1px black;text-align:center;line-height: 200px;font-size: 40px}
        #btn{width:200px;height:40px;display: block;margin:0 auto}
    </style>
</head>
<body>
    <div id="box">
        10
    </div>
    <input type="button" value="开始" id="btn">
</body>
<script>
    // 倒计时，从10到0，停止，//点击按钮还原倒计时，到0，再停-----------------------点击，再还原
    var obox = document.getElementById("box");
    var obtn = document.getElementById("btn");
    var start = obox.innerHTML;
    var num = obox.innerHTML;
    var t;

    // 1.开关：表示多次点击时，每次要做的事情不一样
    var onoff = 0;

    obtn.onclick = function(){
        // 2.每次点击之前，先判断状态，决定要执行的功能
        if(onoff == 0){
            clearInterval(t);
            t = setInterval(function(){
                // 6.计时器每次执行都要判断是否结束
                if(num == 1){
                    // 如果结束，设置内容，设置按钮，改变状态，清除计时器
                    num = "结束了";
                    obtn.value = "复位";
                    onoff = 2;
                    clearInterval(t);
                }else{
                    num--;
                }
                obox.innerHTML = num;
            }, 1000);
            // 3.开始功能做完之后，把状态修改成下次的功能
            obtn.value = "暂停";
            onoff = 1;
        }else if(onoff == 1){   //4.如果不是开始的功能，那么有可能是停止功能
            clearInterval(t);
            // 5.停止功能做完之后，把状态修改成下次的功能
            obtn.value = "继续";
            onoff = 0;
        }else if(onoff == 2){   //7.如果不是开始和暂停的功能，那么有可能是复位功能
            // 复位显示的数字，计算的数字，按钮的文字，功能的状态
            obox.innerHTML = start;
            num = start;
            obtn.value = "开始";
            onoff = 0;
        }
    }
    
</script>
</html>
知识兔
计算机