js倒计时小实例（多次定时）

JS倒计时小实例（多次定时）可以实现在一个html页面中多次使用倒计时的功能。以下是实现步骤：

HTML部分

• 页面中需提供多个容器用于展示不同的倒计时，比如使用 div 标签，需要给每个容器设置不同的 ID

<div id="countdown1"></div>
<div id="countdown2"></div>

JS部分

• 通过 JavaScript 获取所需倒计时的结束时间，可以使用 Date构造函数来传入一个指定的结束时间，注意传入的时间值需减去当前时间的时间戳才是倒计时的时间长度

var nowTime = Date.parse(new Date()), //获取当前时间戳
    endTime1 = Date.parse(new Date('2019/7/20 20:30:00')), //例：结束时间为2019年7月20日20点30分
    endTime2 = Date.parse(new Date('2019/7/21 10:30:00')); //例：结束时间为2019年7月21日10点30分
var time1 = endTime1-nowTime,
    time2 = endTime2-nowTime;

• 核心部分：编写倒计时函数，每秒调用一次倒计时，对应地修改指定 ID 的文本内容

function timer(timestamp, id) {
  var second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;
  var intervalId = setInterval(function() {
    var timeLeft = timestamp - new Date(),
        days = Math.floor(timeLeft / day),
        hours = Math.floor((timeLeft % day) / hour),
        minutes = Math.floor((timeLeft % hour) / minute),
        seconds = Math.floor((timeLeft % minute) / second);
    document.querySelector(id).innerHTML = days + "天 " + hours + "时 " + minutes + "分 " + seconds + "秒";
    if (timeLeft <= 0) {
      clearInterval(intervalId);
      document.querySelector(id).innerHTML = '已到期';
    }
  }, second);
}
timer(time1, '#countdown1'); //使用timer函数实现倒计时1
timer(time2, '#countdown2'); //使用timer函数实现倒计时2

示例说明

以下是两个示例说明：

示例 1

页面上有一个ID为 countdown1 的容器需要展示倒计时，结束时间为2019年7月20日20点30分。

• HTML部分

<div id="countdown1"></div>

• JavaScript 部分

var nowTime = Date.parse(new Date()), 
    endTime1 = Date.parse(new Date('2019/7/20 20:30:00')); 
var time1 = endTime1-nowTime;
timer(time1, '#countdown1');

• 功能
  页面上ID为 countdown1 的容器展示距离2019年7月20日20点30分的倒计时

示例 2

页面上有一个ID为 countdown2 的容器需要展示倒计时，结束时间为2019年7月21日10点30分。

• HTML部分

<div id="countdown2"></div>

• JavaScript 部分

var nowTime = Date.parse(new Date()), 
    endTime2 = Date.parse(new Date('2019/7/21 10:30:00')); 
var time2 = endTime2-nowTime;
timer(time2, '#countdown2');

• 功能
  页面上ID为 countdown2 的容器展示距离2019年7月21日10点30分的倒计时