JS 倒计时定时器

发表于 2022-03-04 | 分类于前端开发， JavaScript | | 浏览次
字数统计: 208 | 阅读时长 ≈ 1
JS 60秒倒计时代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时定时器</title>
</head>

<style>
    .main {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    #timer {
        width: 100px;
    }
</style>

<body>
    <div class="main">
        <div id="timer"></div>
        <a href="javascript:;" id="startBtn">开始</a>
    </div>
    <script>
        let startBtn = document.getElementById('startBtn');
        let timerNode = document.getElementById('timer');
        let senond = 0
        function timer() {
            startBtn.style = "display:none";
            senond = 60;
            timerNode.innerText = senond;
            let promise = new Promise((resolve, reject) => {
                let setTimer = setInterval(() => {

                    senond--;
                    timerNode.innerText = senond;
                    console.log(senond);

                    if (senond <= 0) {
                        resolve(setTimer);
                        startBtn.style = "display:block";
                    }
                }, 1000);
            });
            promise.then((setTimer) => {
                clearInterval(setTimer);
            });
        }


        startBtn.addEventListener('click', timer, false);
    </script>
</body>

</html>