Question

我正在为一个项目做倒数计时器，我试图将div，days，hours，minutes和seconds放入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> "

缺少数字-document.getElementById（“ countdown-timer”）。innerHTML内部的CSS

1 个答案: