我对JS一无所知,所以请减少一些松懈。 我正在使用W3schools网站的倒计时。 问题是,即使我给两个倒计时单独的ID,似乎他们正在运行相同的倒计时,而不是分开。两者似乎都运行sec-cd。在同一页面上进行多次倒计时JS
如何让这两个倒计时单独工作?
HTML
<div id="main">
<h1><u><b>Countdown 1</b></u></h1>
<h1 id="main-cd"></h1>
<div class="secondary">
<h1><u><b>Countdown 2</b></u></h1>
<h1 id="sec-cd"></h1>
</div>
</div>
的JavaScript
var countDownDate = new Date("August 29, 2017 19:00:00 GMT").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("main-cd").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
var ongoing = document.getElementById("main-cd").innerHTML = "Fin";
}
}, 1000);
var countDownDate = new Date("August 28, 2017 19:00:00 GMT").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("sec-cd").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
var ongoing = document.getElementById("sec-cd").innerHTML = "Fin";
}
}, 1000);
的jsfiddle链接:https://jsfiddle.net/az0upkxu/
请将其标记为有帮助的答案。 –