求助：两款倒计时时钟组件无法正常显示数值，求解决方法

嘿，别着急！我看了你的代码，问题出在JavaScript更新倒计时的方式上——你直接把整个#clockdiv的内容替换成了纯文本，这就把你原本精心写好的HTML结构（那些包含span和smalltext的div）给覆盖掉了，所以才会只看到蓝色区块，看不到数值和时间文本。

第一步：修复单个倒计时的显示问题 #

我们需要修改JS代码，分别给每个时间单位对应的span元素赋值，而不是替换整个容器的内容。这样就能保留你原来的HTML结构，同时正确显示数值：

修改后的JavaScript代码 #

// Set the date we're counting down to
var countDownDate = new Date("June 5, 2018 15:37:25").getTime();

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

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an 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);

  // 分别给每个span赋值，而不是替换整个clockdiv的内容
  document.querySelector("#clockdiv .days").textContent = days;
  document.querySelector("#clockdiv .hours").textContent = hours;
  document.querySelector("#clockdiv .minutes").textContent = minutes;
  document.querySelector("#clockdiv .seconds").textContent = seconds;

  // If the count down is over, write some text
  if (distance < 0) {
    clearInterval(x);
    // 这里可以选择替换整个内容，或者逐个修改元素
    document.getElementById("clockdiv").innerHTML = "<div style='background:#0294cb; padding:15px;'>EXPIRED</div>";
  }
}, 1000);

为什么这样改？ #

原来的document.getElementById("clockdiv").innerHTML = ...会把#clockdiv内部所有的HTML都删掉，换成你写的纯文本。现在我们用textContent给每个对应的span设置数值，就能保留你原来的布局结构，蓝色区块和时间文本都会正常显示了。

第二步：实现多个倒计时时钟协同工作 #

如果你需要多个不同的倒计时（比如不同截止日期），我们可以把倒计时逻辑封装成一个函数，这样就能重复调用，给不同的时钟容器设置不同的截止日期：

示例代码：两个独立的倒计时 #

HTML

<!-- 第一个倒计时 -->
<div class="clockdiv" id="clock1">
    <div>
        <span class="days"></span>
        <div class="smalltext">Days</div>
    </div>
    <div>
        <span class="hours"></span>
        <div class="smalltext">Hours</div>
    </div>
    <div>
        <span class="minutes"></span>
        <div class="smalltext">Minutes</div>
    </div>
    <div>
        <span class="seconds"></span>
        <div class="smalltext">Seconds</div>
    </div>
</div>

<!-- 第二个倒计时 -->
<div class="clockdiv" id="clock2">
    <div>
        <span class="days"></span>
        <div class="smalltext">Days</div>
    </div>
    <div>
        <span class="hours"></span>
        <div class="smalltext">Hours</div>
    </div>
    <div>
        <span class="minutes"></span>
        <div class="smalltext">Minutes</div>
    </div>
    <div>
        <span class="seconds"></span>
        <div class="smalltext">Seconds</div>
    </div>
</div>

CSS（把id选择器改成类选择器，适配多个时钟）

.clockdiv {
    color: #ffffff;
    display: inline-block;
    font-size: 14px;
    font-weight: 100;
    text-align: center;
    margin: 10px; /* 给时钟之间加间距 */
}

.clockdiv > div {
    background: #0294cb;
    border-radius: 3px;
    display: inline-block;
    padding: 8px;
}

.clockdiv div > span {
    background: #42baff;
    border-radius: 3px;
    display: inline-block;
    padding: 15px;
}

.smalltext {
    font-size: 14px;
    padding-top: 5px;
}

JavaScript（封装成可复用函数）

// 封装倒计时函数：参数是时钟容器的ID和截止日期
function startCountdown(clockId, targetDate) {
    var countDownDate = new Date(targetDate).getTime();
    
    var interval = setInterval(function() {
        var now = new Date().getTime();
        var distance = countDownDate - 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);

        // 给当前时钟的各个span赋值
        var clock = document.getElementById(clockId);
        clock.querySelector(".days").textContent = days;
        clock.querySelector(".hours").textContent = hours;
        clock.querySelector(".minutes").textContent = minutes;
        clock.querySelector(".seconds").textContent = seconds;

        if (distance < 0) {
            clearInterval(interval);
            clock.innerHTML = "<div style='background:#0294cb; padding:15px;'>EXPIRED</div>";
        }
    }, 1000);
}

// 启动两个倒计时
startCountdown("clock1", "June 5, 2028 15:37:25");
startCountdown("clock2", "December 31, 2024 23:59:59");

这样两个倒计时就会独立运行，各自显示对应的剩余时间啦！

小提示（给JS新手） #

• 用querySelector可以很方便地根据类名选择元素，比getElementById更灵活
• 封装函数是复用代码的好方法，以后需要更多倒计时，只需要调用startCountdown函数就行
• 记得测试截止日期，如果设置的是过去的日期，会直接显示EXPIRED

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