lovecoding
/
W250913


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: #999;
            border-radius: 20px;
            box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -150px;
            text-align: center;
            color: #fff;
            font-weight: bold;
            font-size: 50px;
        }
        p{
            margin-bottom: 0;
            margin-top: 80px;
        }
        button{
            width: 100px;
            height: 50px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>100</p>
        <button>开始</button>
    </div>
    <script>
        // 第一步 获取要控制的元素
        var oNum = document.getElementsByTagName("p");
        var oBtn = document.getElementsByTagName("button");
        // 定义start变量来控制开始和暂停 
        var start = true;
        // 定义定时器数字
        var num = 100;
        // 定义定时器变量
        var timer = null;
        
        // 定义倒计时函数
        function fn(){
            timer = setInterval(function(){
                num--;
                oNum[0].innerText = num;
            },1000);
        }


        // 绑定事件
        oBtn[0].onclick = function(){
            // 修改按钮中的文字
            if(start){
                oBtn[0].innerText = "暂停";
                start = false;
                // 调用倒计时函数
                fn();
            }else{
                oBtn[0].innerText = "开始";
                start = true;
                // 暂停倒计时
                clearInterval(timer);
            }

        }
    </script>
</body>
</html>