js实现多个倒计时并行 js拼团倒计时

实现多个倒计时并行的方式如下：

1. 使用 Date 对象获取当前时间和目标时间之间的时间差，然后根据时间差计算出剩余时间。
2. 将剩余时间转换成分、秒和毫秒，然后在网页上显示出来，使用定时器每隔一秒更新一次显示的时间。
3. 判断剩余时间是否为零，如果为零则停止定时器，显示倒计时结束提示。

代码示例：

// 倒计时的目标时间（2019年12月31日 23:59:59）
var targetTime = new Date('December 31, 2019 23:59:59').getTime();

// 定义显示倒计时的元素
var countdownElement = document.getElementById('countdown');

// 定义更新倒计时的函数
function updateCountdown() {
  // 获取当前时间
  var currentTime = new Date().getTime();

  // 计算剩余时间
  var remainingTime = targetTime - currentTime;

  if (remainingTime > 0) {
    // 计算剩余时间的分、秒和毫秒
    var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
    var milliseconds = remainingTime % 1000;

    // 显示倒计时
    countdownElement.innerHTML = minutes + '分' + seconds + '秒' + milliseconds + '毫秒';
  } else {
    // 倒计时结束
    clearInterval(interval);
    countdownElement.innerHTML = '倒计时结束';
  }
}

// 开始更新倒计时
var interval = setInterval(updateCountdown, 1000);

上面的代码可以实现单个倒计时。如果要实现多个倒计时，可以将上述代码封装成一个函数，然后在需要显示倒计时的地方多次调用这个函数，并传入不同的目标时间和显示元素。

例如，我们可以定义一个名为 startCountdown 的函数，其参数为目标时间和显示元素，代码如下：

function startCountdown(targetTime, element) {
  // 定义更新倒计时的函数
  function updateCountdown() {
    // 获取当前时间
    var currentTime = new Date().getTime();

    // 计算剩余时间
    var remainingTime = targetTime - currentTime;

    if (remainingTime > 0) {
      // 计算剩余时间的分、秒和毫秒
      var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
      var milliseconds = remainingTime % 1000;

      // 显示倒计时
      element.innerHTML = minutes + '分' + seconds + '秒' + milliseconds + '毫秒';
    } else {
      // 倒计时结束
      clearInterval(interval);
      element.innerHTML = '倒计时结束';
    }
  }

  // 开始更新倒计时
  var interval = setInterval(updateCountdown, 1000);
}

然后调用该函数显示多个倒计时：

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

<script>
  // 显示第一个倒计时（目标时间：2019年12月31日 23:59:59）
  var targetTime1 = new Date('December 31, 2019 23:59:59').getTime();
  var countdownElement1 = document.getElementById('countdown1');
  startCountdown(targetTime1, countdownElement1);

  // 显示第二个倒计时（目标时间：2020年1月1日 00:00:00）
  var targetTime2 = new Date('January 1, 2020 00:00:00').getTime();
  var countdownElement2 = document.getElementById('countdown2');
  startCountdown(targetTime2, countdownElement2);
</script>

上面的代码在页面上显示了两个倒计时，分别是到 2019 年 12 月 31 日 23:59:59 和到 2020 年 1 月 1 日 00:00:00。通过封装函数的方式，可以方便地显示多个并行的倒计时。