如何用JS实现点击按钮在生日与新年两个倒计时间来回切换

改动说明 #

• 新增两个目标日期配置项，分别对应生日、新年的目标时间，可自行修改日期数值
• 新增状态变量标记当前展示的倒计时类型
• 新增点击切换函数，切换时同步更新目标日期、页面标题、按钮文案
• 修复原代码中formate的拼写错误为format

完整可运行代码 #

HTML代码 #

<h1>距离我的生日剩余时间</h1>

<div class="countdown-container">
  <div class="countdown-el days-c">
    <p class="big-text" id="days">0</p>
    <span>天</span>
  </div>
  <div class="countdown-el hours-c">
    <p class="big-text" id="hours">0</p>
    <span>时</span>
  </div>
  <div class="countdown-el mins-c">
    <p class="big-text" id="minutes">0</p>
    <span>分</span>
  </div>
  <div class="countdown-el sec-c">
    <p class="big-text" id="seconds">0</p>
    <span>秒</span>
  </div>
</div>

<button class="button" onclick="toggleCountdown()">切换到新年倒计时</button>

JS代码 #

// 可根据实际需求修改两个目标日期
const birthdayDate = "18 Aug 2024"; // 你的生日日期
const newYearDate = "1 Jan 2025"; // 新年日期

const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("minutes");
const secsEl = document.getElementById("seconds");
const titleEl = document.querySelector("h1");
const btnEl = document.querySelector(".button");

// 当前是否展示生日倒计时的状态标记
let isBirthdayCountdown = true;
// 当前生效的目标日期
let currentTargetDate = birthdayDate;

function countdown() {
  const targetDate = new Date(currentTargetDate);
  const currentDate = new Date();
  const totalSeconds = (targetDate - currentDate) / 1000;

  const days = Math.floor(totalSeconds / 3600 / 24);
  const hours = Math.floor(totalSeconds / 3600) % 24;
  const minutes = Math.floor(totalSeconds / 60) % 60;
  const seconds = Math.floor(totalSeconds) % 60;

  daysEl.innerHTML = days;
  hoursEl.innerHTML = format(hours);
  minsEl.innerHTML = format(minutes);
  secsEl.innerHTML = format(seconds);
}

function format(time) {
  return time < 10 ? `0${time}` : time;
}

// 切换倒计时的处理函数
function toggleCountdown() {
  isBirthdayCountdown = !isBirthdayCountdown;
  if (isBirthdayCountdown) {
    currentTargetDate = birthdayDate;
    titleEl.innerText = "距离我的生日剩余时间";
    btnEl.innerText = "切换到新年倒计时";
  } else {
    currentTargetDate = newYearDate;
    titleEl.innerText = "距离新年剩余时间";
    btnEl.innerText = "切换到生日倒计时";
  }
  // 切换后立即刷新倒计时显示
  countdown();
}

countdown()
setInterval(countdown, 1000)

CSS代码 #

无需修改，直接沿用你原有CSS代码即可。

内容的提问来源于stack exchange，提问作者Khubaib Shoukat