12-BOM-使用 js 定时器实现倒计时功能

Gy-qwert

已于 2024-02-18 20:53:52 修改

阅读量855

点赞数

分类专栏： javaweb-HTML\CSS\JS\jQuery 文章标签： javascript 开发语言 ecmascript

于 2023-05-22 19:58:32 首次发布

本文链接：https://blog.csdn.net/qq_47128897/article/details/130813572

版权

javaweb-HTML\CSS\JS\jQuery 专栏收录该内容

48 篇文章 3 订阅

订阅专栏

可以使用定时器 setInterval() 或 setTimeout() 来实现倒计时功能。这两个方法的作用类似，都用于周期性地调用函数。

下面是一个实现倒计时十秒的例子：

<!DOCTYPE html>
<html>
<head>
	<title>倒计时</title>
	<meta charset="UTF-8">
</head>
<body>
    <h1 id="countdown">倒计时：--:--:--</h1>

    <!-- 使用 script 标签嵌入 JavaScript 代码 -->
    <script>
        // 倒计时的总秒数
        var countdownSeconds = 600; // 10分钟

        // 使用 setInterval 函数设置定时器
        var countdownInterval = setInterval(function() {
            // 计算剩余的时间
            var hours = Math.floor(countdownSeconds / 3600);
            var minutes = Math.floor((countdownSeconds % 3600) / 60);
            var seconds = countdownSeconds % 60;

            // 更新倒计时显示
            document.getElementById("countdown").innerHTML = "倒计时：" + hours + ":" + 
            (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);

            // 将剩余的时间减少1秒
            countdownSeconds--;

            // 如果倒计时结束，清除定时器
            if (countdownSeconds < 0) {
                clearInterval(countdownInterval); // 清除定时器
                alert("倒计时结束！"); // 弹出提示框
            }
        }, 1000); // 每秒钟执行一次
    </script>
</body>
</html>

1、var countdownSeconds = 600;

这行代码定义了倒计时的总秒数，这里设置为600秒，即10分钟。

2、var countdownInterval = setInterval(function() { ... }, 1000);

这行代码使用 setInterval 函数创建了一个每秒钟执行一次的定时器，并将返回的定时器 ID 保存在 countdownInterval 变量中。其中，setInterval 函数的第一个参数是要执行的函数，这里使用了一个匿名函数（被花括号包裹的代码块），用于更新倒计时和判断是否结束；第二个参数是时间间隔，这里设置为1000毫秒，即1秒钟。

3、var hours = Math.floor(countdownSeconds / 3600); ...

这一段代码计算出当前剩余的小时数、分钟数和秒数，用于更新倒计时的显示。其中，Math.floor 函数用于向下取整，可以将小数部分舍去，只留整数部分。对于分钟数和秒数，使用了模运算 % 和除法 / 计算。

4、document.getElementById("countdown").innerHTML = "倒计时：" + hours + ":" + ...

这行代码使用 document.getElementById 函数获取到 id 为 countdown 的元素，并将其内容更新为新的倒计时字符串。这个字符串由固定的前缀文本“倒计时：”和计算出来的小时数、分钟数、秒数等拼接而成。字符串中的三元运算符 ?: 用于判断是否需要在分钟数或秒数前添加一个“0”，以保证显示的时间格式正确。