同一页面上的多个倒计时

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

function countdown(targetDate, containerId) {
  var countdownContainer = document.getElementById(containerId);
  var countdownInterval = setInterval(function() {
    var now = new Date().getTime();
    var distance = targetDate - now;

    // 计算剩余的天、小时、分钟和秒
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // 更新倒计时显示
    countdownContainer.innerHTML = days + "天 " + hours + "小时 "
      + minutes + "分钟 " + seconds + "秒 ";

    // 倒计时结束时清除定时器
    if (distance < 0) {
      clearInterval(countdownInterval);
      countdownContainer.innerHTML = "倒计时结束";
    }
  }, 1000);
}

// 启动倒计时
var targetDate1 = new Date("2022-01-01").getTime();
countdown(targetDate1, "countdown1");

var targetDate2 = new Date("2022-02-14").getTime();
countdown(targetDate2, "countdown2");

var targetDate3 = new Date("2022-12-25").getTime();
countdown(targetDate3, "countdown3");

#countdown1, #countdown2, #countdown3 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}