JS 倒计时定时器

最新推荐文章于 2024-01-17 15:49:54 发布

PeakXin

最新推荐文章于 2024-01-17 15:49:54 发布

阅读量338

点赞数

分类专栏： Javascript & Jquery 文章标签： javascript

本文链接：https://blog.csdn.net/xinyflove/article/details/123269533

版权

Javascript & Jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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>

PeakXin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS 倒计时定时器

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"> &lt
复制链接

扫一扫