javascript - 缺少数字 - CSS inside document.getElementById ("countdown-timer").innerHTML

Question

我正在为一个元素做一个倒数计时器，我试图将天、小时、分钟和秒放入 div 中，但无论我做什么，它们都不会进入，我只是不知道如何把它们放进去。问题出在此处的脚本中:document.getElementById("countdown-timer").innerHTML。 div 显示得很好，文本在里面，但应该在文本上方和小 div 内部的数字不存在。在外面。我究竟做错了什么？我该如何修复它们？

谢谢

Problematic divs Image

这是我的代码:

HTML:

<div id="countdown-timer"></div>

CSS:

#countdown-timer{
font-family: Arimo;
color: #fff;
display: inline-block;
font-weight: 90;
text-align: center;
font-size: 28px;
}

#countdown-timer > div{
padding: 10px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.5);
display: inline-block;
}

#countdown-timer div > span{
padding: 10px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.5);
display: inline-block;
}

.text{
padding-top: 5px;
font-size: 15px;
}

脚本:

var countDownDate = new Date("September 5, 2018 09:30:00").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);


document.getElementById("countdown-timer").innerHTML = days + "<div><span class='days'></span><div class='text'>days</div></div>" + hours + "<div><span class='hours'></span><div class='text'>hours</div></div>" + minutes + "<div><span class='minutes'></span><div class='text'>minutes</div></div>" + seconds + "<div><span class='seconds'></span><div class='text'>seconds</div></div> ";


if (distance < 0) {
clearInterval(x);
document.getElementById("countdown-timer").innerHTML = "Launch day";
}
}, 1000); 

Answer 1

您需要将值放在 span 元素中:

document.getElementById("countdown-timer").innerHTML = 
"<div><span class='days'>" + days + "</span><div class='text'>days</div></div>"
+ "<div><span class='hours'>" + hours + "</span><div class='text'>hours</div></div>"
+ "<div><span class='minutes'>" + minutes + "</span><div class='text'>minutes</div></div>"
+ "<div><span class='seconds'>" + minutes + "</span><div class='text'>seconds</div></div> "