javascript实现简单页面倒计时

2023年5月27日下午2:10 • JavaScript

下面是关于“javascript实现简单页面倒计时”的完整攻略。

1. 倒计时的基本概念

倒计时（Countdown）是指从一个固定时间向后计数，时间到了则触发一些既定事件的过程。在网页开发中，常见的用途包括限时抢购、秒杀活动、节假日倒计时等。

2. 倒计时的实现步骤

实现一个简单的倒计时，需要进行以下几个步骤：

2.1 计算时间差

首先，我们需要确定两个固定的时间点：当前时间和目标时间，然后用目标时间减去当前时间，得到时间差。

var now = new Date();        // 获取当前时间
var targetTime = new Date("2022/01/01 00:00:00");    // 设置目标时间
var diff = targetTime - now;    // 计算时间差，单位为毫秒

2.2 将时间差转换为友好的显示格式

接下来，我们需要将时间差转换为友好的使用方式，即将时间差转换为天数、小时数、分钟数和秒数。

var days = Math.floor(diff / (24 * 3600 * 1000));    // 计算天数
var hours = Math.floor(diff / (3600 * 1000)) - (days * 24);    // 计算小时
var minutes = Math.floor(diff / (60 * 1000)) - (days * 24 * 60) - (hours * 60);    // 计算分钟
var seconds = Math.floor(diff / 1000) - (days * 24 * 60 * 60) - (hours * 60 * 60) - (minutes * 60);    // 计算秒数

2.3 更新显示

最后，我们需要将计算出的天数、小时数、分钟数和秒数，显示在页面中。

document.getElementById("timer").innerHTML =
    "距离目标时间还有： " +
    days + " 天 " +
    hours + " 小时 " +
    minutes + " 分钟 " +
    seconds + " 秒 ";

3. 示例说明

3.1 示例1

下面是一个简单的示例，实现了倒计时的功能。

<!DOCTYPE html>
<html>
<head>
    <title>倒计时示例</title>
    <meta charset="UTF-8">
    <script>
        //  计算时间差
        var now = new Date();
        var targetTime = new Date("2022/01/01 00:00:00");
        var diff = targetTime - now;

        //  将时间差转换为友好的显示格式
        var days = Math.floor(diff / (24 * 3600 * 1000));
        var hours = Math.floor(diff / (3600 * 1000)) - (days * 24);
        var minutes = Math.floor(diff / (60 * 1000)) - (days * 24 * 60) - (hours * 60);
        var seconds = Math.floor(diff / 1000) - (days * 24 * 60 * 60) - (hours * 60 * 60) - (minutes * 60);

        //  更新显示
        setInterval(function () {
            now = new Date();
            diff = targetTime - now;
            days = Math.floor(diff / (24 * 3600 * 1000));
            hours = Math.floor(diff / (3600 * 1000)) - (days * 24);
            minutes = Math.floor(diff / (60 * 1000)) - (days * 24 * 60) - (hours * 60);
            seconds = Math.floor(diff / 1000) - (days * 24 * 60 * 60) - (hours * 60 * 60) - (minutes * 60);
            document.getElementById("timer").innerHTML =
                "距离目标时间还有： " +
                days + " 天 " +
                hours + " 小时 " +
                minutes + " 分钟 " +
                seconds + " 秒 ";
        }, 1000)
    </script>
</head>
<body>
<div id="timer"></div>
</body>
</html>

3.2 示例2

下面是另一个示例，实现了倒计时的效果，并实现了超过目标时间后的提示文本。

<!DOCTYPE html>
<html>
<head>
    <title>倒计时示例</title>
    <meta charset="UTF-8">
    <script>
        //  计算时间差
        var now = new Date();
        var targetTime = new Date("2021/11/01 00:00:00");
        var diff = targetTime - now;

        //  将时间差转换为友好的显示格式
        var days = Math.floor(diff / (24 * 3600 * 1000));
        var hours = Math.floor(diff / (3600 * 1000)) - (days * 24);
        var minutes = Math.floor(diff / (60 * 1000)) - (days * 24 * 60) - (hours * 60);
        var seconds = Math.floor(diff / 1000) - (days * 24 * 60 * 60) - (hours * 60 * 60) - (minutes * 60);

        //  更新显示，并提示超时
        setInterval(function () {
            now = new Date();
            diff = targetTime - now;
            days = Math.floor(diff / (24 * 3600 * 1000));
            hours = Math.floor(diff / (3600 * 1000)) - (days * 24);
            minutes = Math.floor(diff / (60 * 1000)) - (days * 24 * 60) - (hours * 60);
            seconds = Math.floor(diff / 1000) - (days * 24 * 60 * 60) - (hours * 60 * 60) - (minutes * 60);

            var timerText;

            if (diff <= 0) {
                timerText = "时间已到！";
            } else {
                timerText = "距离目标时间还有： " +
                    days + " 天 " +
                    hours + " 小时 " +
                    minutes + " 分钟 " +
                    seconds + " 秒 ";
            }

            document.getElementById("timer").innerHTML = timerText;
        }, 1000)
    </script>
</head>
<body>
<div id="timer"></div>
</body>
</html>

以上就是“javascript实现简单页面倒计时”的完整攻略，希望能对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现简单页面倒计时 - Python技术站