[英]Multiple countdowns on the same page JS
我對JS一無所知,所以請給我一些時間。 我正在使用W3schools網站的倒計時。 問題是,即使我給兩個倒計時分別提供了ID,但它們似乎在運行相同的倒計時,而不是分開。 兩者似乎都運行sec-cd。
如何允許這兩個倒數計時分別工作?
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/
這是因為您要覆蓋相同的變量。 請使用另一個變量。
var countDownDate = new Date("August 29, 2017 19:00:00 GMT").getTime();
var countDownDate_2 = new Date("August 28, 2017 19:00:00 GMT").getTime();// renmaed variable
還可以使用這些參數在代碼內使用這些不同的變量名稱。
下面的代碼將起作用。
var countDownDate = new Date("August 29, 2017 19:00:00 GMT").getTime();
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
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);
// Output the result in an element with id="demo"
document.getElementById("main-cd").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
var ongoing =document.getElementById("main-cd").innerHTML = "Event Ongoing";
}
}, 1000);
// Set the date we're counting down to
var countDownDate_2 = new Date("August 28, 2017 19:00:00 GMT").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate_2 - now;
// Time calculations for days, hours, minutes and seconds
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);
// Output the result in an element with id="demo"
document.getElementById("sec-cd").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
var ongoing =document.getElementById("sec-cd").innerHTML = "Season has eneded!";
}
}, 1000);
您正在使用countDownDate
變量兩次。 只需重新聲明它具有countDownDateTwo
並將distance
更改為等於countDownDateTwo - now
就可以了。
注意變量名,這就是范圍是關鍵的原因。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.