缺少数字 - document.getElementById("countdown-timer").innerHTML 中的 CSS答案

【问题标题】：Missing number - CSS inside document.getElementById("countdown-timer").innerHTML缺少数字 - document.getElementById("countdown-timer").innerHTML 中的 CSS
【发布时间】：2019-01-05 07:59:16
【问题描述】：

我正在为一个项目做一个倒数计时器，我试图将天、小时、分钟和秒放入 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);

【问题讨论】：

检查您插入的标记。数字应该在<span> 元素中。

标签： javascript html css

【解决方案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> "

【讨论】：