通过JavaScript脚本实现60秒倒计时

RichardLau_Cx

已于 2022-07-18 22:41:52 修改

阅读量7.5k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： Tools 文章标签： javascript 前端计时器 sleep函数实用工具

于 2022-07-18 22:35:12 首次发布

本文链接：https://blog.youkuaiyun.com/Richardlcx/article/details/125861749

Tools 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript实现实时的60秒倒计时，包括选择器操作、定时器设置、递归函数countDown以及计时结束的逻辑。适合初学者理解JavaScript基础和DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CountDown</title>
</head>
<body>
    <span class="second">开始</span>

    <script>
            let second = document.querySelector(".second");
            let i = 60  // 倒计时秒数

            // 定时器 每隔一秒变化一次（1000ms = 1s）
            let t = setInterval(countDown, 1000);

            function countDown() {
                    console.log(i);
                    second.innerHTML = i;

                    // 60 秒倒计时结束
                    if (i === 0)
                        clearInterval(t);

                    i--;
        }
    </script>
</body>
</html>