我有一个倒计时计时器，它的秒和分钟都不动

Question

Timer无法在javascript中工作。我想要一个自动工作的倒计时计时器。但在这里，只有时针在动。秒和分钟根本没有变化。代码如下：

const day = document.querySelector(".day .numb");
const hour = document.querySelector(".hour .numb");
const min = document.querySelector(".min .numb");
const sec = document.querySelector(".sec .numb");
var timer = setInterval(() => {
var currentDate = new Date().getTime();
var launchDate = new Date('Jan 24, 2021 13:00:00').getTime();
var duration = launchDate - currentDate;
var days = Math.floor(duration / (1000 * 60 * 60 * 24));
var hours = Math.floor((duration % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((duration % (1000 * 60)) / 1000);
day.innerHTML = days;
hour.innerHTML = hours;
min.innerHTML = minutes;
sec.innerHTML = seconds;
if (days < 10) {
day.innerHTML = '0' + days;
}
if (hours < 10) {
hour.innerHTML = '0' + hours;
}
if (minutes < 10) {
min.innerHTML = '0' + minutes;
}
if (seconds < 10) {
sec.innerHTML = '0' + seconds;
}
if (duration < 0) {
clearInterval(timer);
}
}, 1000);

<div class="count-down">
<div class=" timer day">
<div class="count">
<div class="numb">00</div>
<div class="text">Days</div>
</div>
</div>
<div class="clone">:</div>
<div class="timer hour">
<div class="count">
<div class="numb">00</div>
<div class="text">Hours</div>
</div>
</div>
<div class="clone">:</div>
<div class=" timer mins">
<div class="count">
<div class="numb">00</div>
<div class="text">Minutes</div>
</div>
</div>
<div class="clone">:</div>
<div class="timer sec">
<div class="count">
<div class="numb">00</div>
<div class="text">Seconds</div>
</div>
</div>
</div>
</div>
<!--Creating Respionsive Countdown timer using Javascript-->

Answer 1

打字const min = document.querySelector(".mins .numb");

改进：

const pad = num => ("0" + num).slice(-2),
plural = num => num === 1 ? "" : "s",
day = document.querySelector(".day .numb"),
hour = document.querySelector(".hour .numb"),
min = document.querySelector(".mins .numb"),
sec = document.querySelector(".sec .numb"),
launchDate = new Date('Jan 24, 2021 13:00:00').getTime(),
timer = setInterval(() => {
const currentDate = new Date().getTime(),
duration = launchDate - currentDate,
days = Math.floor(duration / (1000 * 60 * 60 * 24)),
hours = Math.floor((duration % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));
seconds = Math.floor((duration % (1000 * 60)) / 1000);

day.innerHTML  = pad(days);    day.nextElementSibling.textContent = "Day"     + plural(days);
hour.innerHTML = pad(hours);  hour.nextElementSibling.textContent = "Hour"    + plural(hours);
min.innerHTML  = pad(minutes); min.nextElementSibling.textContent = "Minute"  + plural(minutes);
sec.innerHTML  = pad(seconds); sec.nextElementSibling.textContent = "Second"  + plural(seconds);
if (duration < 0) clearInterval(timer);
}, 1000);

<div class="count-down">
<div class=" timer day">
<div class="count">
<div class="numb">00</div>
<div class="text"> </div>
</div>
</div>
<div class="clone">:</div>
<div class="timer hour">
<div class="count">
<div class="numb">00</div>
<div class="text"> </div>
</div>
</div>
<div class="clone">:</div>
<div class=" timer mins">
<div class="count">
<div class="numb">00</div>
<div class="text"> </div>
</div>
</div>
<div class="clone">:</div>
<div class="timer sec">
<div class="count">
<div class="numb">00</div>
<div class="text"> </div>
</div>
</div>
</div>