javascript实现简单倒计时效果

下面是“JavaScript实现简单倒计时效果”的完整攻略：

1. 准备工作

在实现倒计时之前，需要考虑几个方面：
1. 计时器应该显示在页面的哪个位置
2. 倒计时的目标时间是多少
3. 如果倒计时结束之后需要执行什么操作
所以我们可以准备一个包含倒计时的容器元素和需要倒计时到的时间的变量。

在HTML中定义计时器容器的元素：

<div id="countdown"></div>

在JS中定义倒计时所需的变量：

let countDownDate = new Date("2021-12-31T23:59:59").getTime(); // 倒计时到2021年12月31日23时59分59秒
let countdown = document.getElementById("countdown");

2. 实现倒计时

计时器主要分为两个部分：
1. 计算剩余时间
2. 更新计时器显示

计算剩余时间：

let now = new Date().getTime(); // 获取当前时间
let distance = countDownDate - now; // 计算距离倒计时结束还有多久时间

更新计时器显示：

let days = Math.floor(distance / (1000 * 60 * 60 * 24)); // 计算还剩下多少天
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // 计算还剩下多少小时
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); // 计算还剩下多少分钟
let seconds = Math.floor((distance % (1000 * 60)) / 1000); // 计算还剩下多少秒

countdown.innerHTML = `距离倒计时结束还有 ${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;

3. 判断倒计时是否结束

为了在倒计时结束之后执行一些操作，我们需要对剩余时间进行判断，

if(distance <= 0) {
    clearInterval(intervalId); // 倒计时结束，清除计时器
    countdown.innerHTML = "倒计时结束";
    // 在此处添加倒计时结束后的操作
}

4. 示例说明

示例1：在页面上创建一个倒计时计时器，当倒计时结束时，在页面上弹出一个提示框。

// HTML
<div id="countdown"></div>

// JS 
let countDownDate = new Date("2021-12-31T23:59:59").getTime();
let countdown = document.getElementById("countdown");

function startCountdown() {
    let intervalId = setInterval(() => {
        let now = new Date().getTime();
        let distance = countDownDate - now;

        let days = Math.floor(distance / (1000 * 60 * 60 * 24));
        let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        let seconds = Math.floor((distance % (1000 * 60)) / 1000);

        countdown.innerHTML = `距离倒计时结束还有 ${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;

        if(distance <= 0) {
            clearInterval(intervalId);
            countdown.innerHTML = "倒计时结束";
            alert("倒计时结束！");
        }
    }, 1000);
}

startCountdown();

示例2：在页面上创建多个倒计时计时器，每个计时器倒计时的目标时间都不同。

// HTML
<div class="countdown"></div>
<div class="countdown"></div>

// JS
let countDownDates = [
    new Date("2021-12-31T23:59:59").getTime(),
    new Date("2022-12-31T23:59:59").getTime(),
];
let countdowns = document.querySelectorAll(".countdown");

function startCountdown() {
    for(let i = 0; i < countdowns.length; i++) {
        let intervalId = setInterval(() => {
            let now = new Date().getTime();
            let distance = countDownDates[i] - now;

            let days = Math.floor(distance / (1000 * 60 * 60 * 24));
            let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            let seconds = Math.floor((distance % (1000 * 60)) / 1000);

            countdowns[i].innerHTML = `距离倒计时结束还有 ${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;

            if(distance <= 0) {
                clearInterval(intervalId);
                countdowns[i].innerHTML = "倒计时结束";
            }
        }, 1000);
    }
}

startCountdown();

以上就是JavaScript实现简单倒计时效果的完整攻略了。