求助：创建带外部时间标签的倒计时计时器（附现有代码）

问题代码 #

你的JS逻辑没问题，核心是HTML结构需要调整来添加对应标签：

// Set the date we're counting down to
var countDownDate = new Date("Feb 21, 2023 00:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes, and seconds
  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);

  // Add leading zeros to values less than 10
  days = days.toString().padStart(2, "0");
  hours = hours.toString().padStart(2, "0");
  minutes = minutes.toString().padStart(2, "0");
  seconds = seconds.toString().padStart(2, "0");

  // Display the result in the element with id="demo"
  document.getElementById("days").innerHTML = days;
  document.getElementById("hours").innerHTML = hours;
  document.getElementById("minutes").innerHTML = minutes;
  document.getElementById("seconds").innerHTML = seconds;

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("countdownText").innerHTML = "EXPIRED";
  } else {
    document.getElementById("countdownText").innerHTML = "";
  }
}, 1000);

<div style="display: inline-block; background-color: black; padding: 10px; border-radius: 10px;">
  <div style="display: inline-block; background-color: brown; padding: 10px; margin-right: 10px; border-radius: 10px;">
    <div style="font-size: 50px; color: white; font-family: monospace;" id="days"></div>
  </div>
  <div style="display: inline-block; background-color: brown; padding: 10px; margin-right: 10px; border-radius: 10px;">
    <div style="font-size: 50px; color: white; font-family: monospace;" id="hours"></div>
  </div>
  <div style="display: inline-block; background-color: brown; padding: 10px; margin-right: 10px; border-radius: 10px;">
    <div style="font-size: 50px; color: white; font-family: monospace;" id="minutes"></div>
  </div>
  <div style="display: inline-block; background-color: brown; padding: 10px; border-radius: 10px;">
    <div style="font-size: 50px; color: white; font-family: monospace;" id="seconds"></div>
  </div>
</div>
<div style="color: black; font-weight: bold; text-align: center; margin-left: -650px;">
  <span id="countdownText"></span>
</div>

修改后的代码（添加标签并精准对齐） #

调整HTML结构，用Flex布局实现标签与数值的自动对齐，无需硬编码偏移值：

<!-- 新增父容器，统一管理数值、标签和提示文本 -->
<div style="display: flex; flex-direction: column; align-items: center;">
  <!-- 原有的倒计时数值区域 -->
  <div style="display: inline-block; background-color: black; padding: 10px; border-radius: 10px;">
    <div style="display: inline-block; background-color: brown; padding: 10px; margin-right: 10px; border-radius: 10px;">
      <div style="font-size: 50px; color: white; font-family: monospace;" id="days"></div>
    </div>
    <div style="display: inline-block; background-color: brown; padding: 10px; margin-right: 10px; border-radius: 10px;">
      <div style="font-size: 50px; color: white; font-family: monospace;" id="hours"></div>
    </div>
    <div style="display: inline-block; background-color: brown; padding: 10px; margin-right: 10px; border-radius: 10px;">
      <div style="font-size: 50px; color: white; font-family: monospace;" id="minutes"></div>
    </div>
    <div style="display: inline-block; background-color: brown; padding: 10px; border-radius: 10px;">
      <div style="font-size: 50px; color: white; font-family: monospace;" id="seconds"></div>
    </div>
  </div>
  <!-- 新增时间单位标签区域 -->
  <div style="display: flex; justify-content: space-between; width: 480px; margin-top: 8px;">
    <span style="color: black; font-weight: bold; font-family: sans-serif;">Days</span>
    <span style="color: black; font-weight: bold; font-family: sans-serif;">Hours</span>
    <span style="color: black; font-weight: bold; font-family: sans-serif;">Minutes</span>
    <span style="color: black; font-weight: bold; font-family: sans-serif;">Seconds</span>
  </div>
  <!-- 到期提示文本 -->
  <div style="color: black; font-weight: bold; text-align: center; margin-top: 10px;">
    <span id="countdownText"></span>
  </div>
</div>

关键调整说明 #

1. 用垂直Flex布局的父容器，让数值区域、标签区域、提示文本自动垂直居中排列
2. 标签区域用justify-content: space-between，确保每个标签与对应数值单元精准对齐（可根据数值区域实际宽度调整标签容器的width值）
3. 移除了原有的负margin偏移，避免不同尺寸下的布局错乱
4. 标签样式可根据需求自由调整字体、颜色、间距等

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