JS实现一个页面多个倒计时的3种方法

在一个网站中，可能会涉及到多个倒计时的展示，比如商品秒杀、优惠活动等。这时候，就需要实现一个页面中多个倒计时的效果。下面我们来介绍三种方式来实现这个功能。

方法一：使用setInterval()方法

setInterval()方法可以在指定的时间间隔(repeatTime)内，反复执行某个函数(fn)。我们可以利用setInterval()方法来实现多个倒计时。以下是一个示例代码：

// HTML
<div id="timer1"></div>
<div id="timer2"></div>

// JS
var targetTime1 = new Date("2022-01-01").getTime();
var targetTime2 = new Date("2022-02-01").getTime();

setInterval(function() {
    var nowTime = new Date().getTime();
    var diffTime1 = targetTime1 - nowTime;
    var minutes1 = Math.floor(diffTime1 / (1000 * 60));
    var seconds1 = Math.floor((diffTime1 % (1000 * 60)) / 1000);
    document.getElementById("timer1").innerHTML = minutes1 + ":" + seconds1;

    var diffTime2 = targetTime2 - nowTime;
    var minutes2 = Math.floor(diffTime2 / (1000 * 60));
    var seconds2 = Math.floor((diffTime2 % (1000 * 60)) / 1000);
    document.getElementById("timer2").innerHTML = minutes2 + ":" + seconds2;
}, 1000);

上面的代码中，我们根据两个倒计时的目标时间(targetTime1和targetTime2)，计算出与当前时间的差值(diffTime1和diffTime2)，并将秒数和分钟数分别展示在不同的div上。

方法二：使用setTimeout()方法

setTimeout()方法可以在指定的时间(delayTime)后，执行某个函数(fn)。通过不断地递归setTimeout()方法，我们可以实现一个类似于setInterval()的效果。以下是一个示例代码：

// HTML
<div id="timer1"></div>
<div id="timer2"></div>

// JS
var targetTime1 = new Date("2022-01-01").getTime();
var targetTime2 = new Date("2022-02-01").getTime();

function countdown1() {
    var nowTime = new Date().getTime();
    var diffTime = targetTime1 - nowTime;
    var minutes = Math.floor(diffTime / (1000 * 60));
    var seconds = Math.floor((diffTime % (1000 * 60)) / 1000);
    document.getElementById("timer1").innerHTML = minutes + ":" + seconds;

    if (diffTime < 0) {
        document.getElementById("timer1").innerHTML = "倒计时结束";
    } else {
        setTimeout(countdown1, 1000);
    }
}

function countdown2() {
    var nowTime = new Date().getTime();
    var diffTime = targetTime2 - nowTime;
    var minutes = Math.floor(diffTime / (1000 * 60));
    var seconds = Math.floor((diffTime % (1000 * 60)) / 1000);
    document.getElementById("timer2").innerHTML = minutes + ":" + seconds;

    if (diffTime < 0) {
        document.getElementById("timer2").innerHTML = "倒计时结束";
    } else {
        setTimeout(countdown2, 1000);
    }
}

countdown1();
countdown2();

上面的代码中，我们分别实现了两个倒计时函数(countdown1和countdown2)，并通过递归setTimeout()方法，不断地调用这两个函数来实现倒计时效果。

方法三：封装倒计时组件

为了让代码更加整洁、简单，我们可以将倒计时的功能封装成一个组件。以下是一个示例代码：

// HTML
<div id="timer1"></div>
<div id="timer2"></div>

// JS
function Countdown(targetTime, element) {
    var self = this;
    this.targetTime = targetTime;
    this.element = element;

    this.timer = setInterval(function() {
        var nowTime = new Date().getTime();
        var diffTime = self.targetTime - nowTime;
        var minutes = Math.floor(diffTime / (1000 * 60));
        var seconds = Math.floor((diffTime % (1000 * 60)) / 1000);
        self.element.innerHTML = minutes + ":" + seconds;

        if (diffTime < 0) {
            self.element.innerHTML = "倒计时结束";
            clearInterval(self.timer);
        }
    }, 1000);
}

var timer1 = new Countdown(new Date("2022-01-01").getTime(), document.getElementById("timer1"));
var timer2 = new Countdown(new Date("2022-02-01").getTime(), document.getElementById("timer2"));

上面的代码中，我们封装了一个名为Countdown的组件，该组件可以接受目标时间(targetTime)和展示倒计时的元素(element)作为参数。通过封装组件，我们可以更加方便地实现多个倒计时的效果。