如何在 WordPress 中添加倒数计时器小部件(3 种方式)

<!-- 倒数计时器容器 -->
<div class="custom-countdown">
  <h3>距离活动结束还有：</h3>
  <div class="countdown-display">
    <div class="countdown-item">
      <span id="days" class="countdown-number">00</span>
      <span class="countdown-label">天</span>
    </div>
    <div class="countdown-item">
      <span id="hours" class="countdown-number">00</span>
      <span class="countdown-label">时</span>
    </div>
    <div class="countdown-item">
      <span id="minutes" class="countdown-number">00</span>
      <span class="countdown-label">分</span>
    </div>
    <div class="countdown-item">
      <span id="seconds" class="countdown-number">00</span>
      <span class="countdown-label">秒</span>
    </div>
  </div>
  <div id="countdown-end" style="display: none;">活动已结束！</div>
</div>

<!-- 样式 -->
<style>
.custom-countdown {
  text-align: center;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 8px;
}
.countdown-display {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
}
.countdown-item {
  text-align: center;
}
.countdown-number {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  background: #fff;
  width: 60px;
  padding: 8px 0;
  border-radius: 4px;
  border: 1px solid #ddd;
}
.countdown-label {
  font-size: 14px;
  color: #666;
}
</style>

<!-- 倒计时逻辑 -->
<script>
// 设置结束时间（年, 月-1, 日, 时, 分, 秒）
const endTime = new Date(2025, 11, 31, 23, 59, 59).getTime();

// 更新倒计时
function updateCountdown() {
  const now = new Date().getTime();
  const timeLeft = endTime - now;

  // 计算天、时、分、秒
  const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
  const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

  // 显示结果（不足两位补0）
  document.getElementById("days").innerText = days.toString().padStart(2, "0");
  document.getElementById("hours").innerText = hours.toString().padStart(2, "0");
  document.getElementById("minutes").innerText = minutes.toString().padStart(2, "0");
  document.getElementById("seconds").innerText = seconds.toString().padStart(2, "0");

  // 倒计时结束
  if (timeLeft < 0) {
    clearInterval(timer);
    document.querySelector(".countdown-display").style.display = "none";
    document.getElementById("countdown-end").style.display = "block";
  }
}

// 初始化并每秒更新一次
updateCountdown();
const timer = setInterval(updateCountdown, 1000);
</script>