lovecoding
/
W250511


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
							<!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: #ccc;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            border-radius: 10px;
            position: fixed;
            top:50%;
            left:50%;
            margin-top: -150px;
            margin-left: -150px;
            text-align: center;
            line-height: 300px;
        }
        .box #num{
            font-size: 50px;
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="box">
        <span id="num">10</span>
    </div>
 
    <script>
        // 第一步 获取到数字标签
        // getElementById 返回的是具体的标签不用加下标
        var num = document.getElementById("num");

        // 第二步 倒计时

        // 通过定义变量的方式实现倒计时
        // var i = 10;
        // setInterval(function(){
        //     i--;
        //     num.innerText = i;
        // },1000)

        // 通过innerText 获取数字
        // 获取回来的是字符串 转换成数值型再运算
        var timer = setInterval(function(){
            // console.log(num.innerText);
            // 判断数字是否为0
            if(parseInt(num.innerText) == 0){
                // 如果为0 那么清楚定时器 
                clearInterval(timer);
            }else{
                num.innerText = parseInt(num.innerText) - 1;
            }
        },1000)


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