多个倒数计时器JS

本篇介绍了一款使用JavaScript实现的多个倒数计时器，可以在同一页面上显示多个倒计时。在实现过程中，使用了计时器的相关知识及如何使用DOM操作HTML元素。

实现步骤

1. HTML布局

首先需要在HTML文件中定义多个计时器的位置，并给他们添加一个ID，用于JS来获取元素。下面是一个示范代码：

<div id="timer1">倒计时1： <span id="time1">30</span> 秒</div>

<div id="timer2">倒计时2： <span id="time2">60</span> 秒</div>

<div id="timer3">倒计时3： <span id="time3">120</span> 秒</div>

2. JS实现

然后是JS的实现，首先要获取HTML元素：

let timeElement1 = document.getElementById("time1");
let timeElement2 = document.getElementById("time2");
let timeElement3 = document.getElementById("time3");

然后定义计时器函数，默认计时器为30秒：

function countdown(element, minutes, seconds) {
    let time = minutes * 60 + seconds;

    let interval = setInterval(function () {
        let minutesLeft = Math.floor(time / 60);
        let secondsLeft = time % 60;

        element.innerHTML = minutesLeft + "分" + secondsLeft + "秒";

        time--;

        if (time < 0)
            clearInterval(interval);
    }, 1000);
}

下一步就是初始化计时器：

countdown(timeElement1, 0, 30);
countdown(timeElement2, 1, 0);
countdown(timeElement3, 2, 0);

实现效果

这里是实现的效果图：

总结

本文介绍了一款使用JavaScript实现的多个倒数计时器，通过获取HTML元素以及使用计时器实现了倒数计时的功能。可以在同一页面上同时显示多个计时器。