[英]How can i add the exact time to the date on countdown timer?
如何將精確的時間（例如“ 19:30”）添加到計數器，並仍然顯示“明天”，“今天”和“過期”消息？
因為當我添加“ 19:30:00”時，計數器不准確。
當我使用“ Math.floor”而不是“ Math.ceil”時，計數器是准確的，但此時未顯示消息。
<!DOCTYPE HTML> <html> <head> <style> p { text-align: center; font-size: 60px; } </style> </head> <body> <p id="demo"></p> <script> // Set the date we're counting down to var countDownDate = new Date("Dec 18, 2017 19:30:00").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 - now; // Time calculations for days, hours, minutes and seconds var days = Math.ceil(distance / (1000 * 60 * 60 * 24)); var hours = Math.ceil((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.ceil((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.ceil((distance % (1000 * 60)) / 1000); // Output the result in an element with id="demo" document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // If the count down is over, write some text console.log(days); if (days === 1) { clearInterval(x); document.getElementById("demo").innerHTML = "TOMORROW"; } if (days === 0) { clearInterval(x); document.getElementById("demo").innerHTML = "TODAY"; } if (days < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); </script> </body> </html>
這應該工作
// Set the date we're counting down to var countDownDate = new Date("Dec 3, 2017 19:30:00"); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date(); // Find the distance between now an the count down date var distance = countDownDate.getTime() - now.getTime(); // 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("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // If the count down is over, write some text console.log(days); var tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1); if (tomorrow.getFullYear() == countDownDate.getFullYear() && tomorrow.getMonth() == countDownDate.getMonth() && tomorrow.getDate() == countDownDate.getDate()) { clearInterval(x); document.getElementById("demo").innerHTML = "TOMORROW"; } else if (now.getFullYear() == countDownDate.getFullYear() && now.getMonth() == countDownDate.getMonth() && now.getDate() == countDownDate.getDate()) { clearInterval(x); document.getElementById("demo").innerHTML = "TODAY"; } else if (countDownDate.getTime() < now.getTime()) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000);
p { text-align: center; font-size: 60px; }
<p id="demo"></p>
如何使這個倒計時計時器倒計時到特定日期，而不僅僅是從某個時間開始？
[英]How to make this countdown timer countdown to a specific date, not just from a time?
如何基於MySQL日期/時間戳將倒數計時器添加到數組
[英]How to add a countdown timer to an array based off mysql date/timestamp
如何獲取倒數計時器，以在每次刷新JavaScript時停止重新啟動
[英]How can I get my countdown timer, to stop starting over every time i refresh in JavaScript
如何使用document.getElementById在倒數計時器中為輸出元素添加類（樣式）？
[英]How can I add class(style) for output elements in countdown timer using document.getElementById?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.