倒数文字内容的天，分钟，秒动态移动

Question

我有此代码倒数计时运行正常，但问题是开始计数时新行中的文本内容显示不同。我希望文本内容和计时器显示固定。请帮助谢谢。

var countDownDate = new Date("December 25, 2018").getTime();
    
var x = 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);

    var left = document.getElementById('time'); 
    left.childNodes[0].textContent =  "	"+days + "	" + hours + "    "
    + minutes + "  " + seconds + " "; 
    left.childNodes[1].textContent="Days"+"Hours"+"Minutes"+"Seconds";

    if (distance < 0) {
        clearInterval(x);
        document.getElementById("left").innerHTML = "EXPIRED";
    }
}, 1000);

#time #left{
  color: black;
  font-size: 70px;
  margin-top: 10px;
}

#time #date{
  color: #0000FF;
  font-size: 90px;
  margin-top: -28px;
}

<div id="time">
  <p id="left"></p>
  <p id="date"></p>
</div>
    

我希望这个成为输出：

output that i want to be the result

Answer 1

var countDownDate = new Date("December 25, 2018").getTime();
    
var x = 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);

    var countdownDiv = document.getElementById('countdown').children; 
    countdownDiv[0].innerHTML = '<div class="cnt">'+days+'</div>'+'<div class="txt">Days</div>';
    countdownDiv[1].innerHTML = '<div class="cnt">'+hours+'</div>'+'<div class="txt">Hours</div>';
    countdownDiv[2].innerHTML = '<div class="cnt">'+minutes+'</div>'+'<div class="txt">Minutes</div>';
    countdownDiv[3].innerHTML = '<div class="cnt">'+seconds+'</div>'+'<div class="txt">Seconds</div>';
    
    if (distance < 0) {
        clearInterval(x);
        document.getElementById('countdown').innerHTML = "EXPIRED";
    }
}, 1000);

#countdown {
  width: 400px;
}
#countdown > div {
  float:left;
  width:25%;
}
.cnt,.txt {
  text-align: center;
}
.cnt {
  font-size: 30px;
  color: black;
}
.txt {
  font-size: 15px;
  color: #0000FF;
}

<div id="time">
  <div id="countdown">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

重新格式化了您的代码。看看是否有帮助。