[英]remove the 0's in count down timer
我創建了一個從10:00開始倒數的倒數計時器,我希望倒數計時器在1分鍾以下時刪除前一個0。 並在10秒以下添加結尾的零。
例如:“ 0:59”我想刪除0,所以它應該顯示“:59”,然后“:9”應該顯示“:09”
老實說,我沒有嘗試太多。.我想也許可以用正則表達式來完成,但是我不確定如何做。
我的計時器:
const mins = 10;
// getting the exact time as of the page load
const now = new Date().getTime();
// the math that is done for the actual countdown. So 10*60*1000 + the time retrieved from the page load.
const deadline = mins * 60 * 1000 + now;
// This is a function, however it is a JavaScript method and calls a function.
setInterval(() => {
// Gets the current time
var currentTime = new Date().getTime();
// gets the 'distance' between the deadline(10 mins) and the current time
var distance = deadline - currentTime;
// found out this method does the math for you, I had to look this up and research it on W3schools
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Inserts the timer into the Span timer
timeSpan.innerHTML = minutes + ':' + seconds;
// the interval is set to 1 sec, so the timer refreshes and counts down every second
if (seconds < 0) {
confirm('Alert For your User!');
window.location.reload();
}
}, 1000);
我沒有添加任何內容作為開始的方式,因為我不確定從哪里開始! 任何幫助都會很棒。
您可以使用一些基本的if語句(請參見下文)來執行此操作,但是正如評論中的人所說的那樣,將其讀取為:59
而不是0:59
看起來很奇怪
const timeSpan = document.querySelector('#test'); const mins = 10; // getting the exact time as of the page load const now = new Date().getTime(); // the math that is done for the actual countdown. So 10*60*1000 + the time retrieved from the page load. const deadline = 62 * 1000 + now; // This is a function, however it is a JavaScript method and calls a function. setInterval(() => { // Gets the current time var currentTime = new Date().getTime(); // gets the 'distance' between the deadline(10 mins) and the current time var distance = deadline - currentTime; // found out this method does the math for you, I had to look this up and research it on W3schools var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); if (minutes > 0) { if(seconds < 10){ timeSpan.innerHTML = minutes + ':0' + seconds; } else { // Inserts the timer into the Span timer timeSpan.innerHTML = minutes + ':' + seconds; } } else if(seconds < 10) { timeSpan.innerHTML = ':0' + seconds; } else { timeSpan.innerHTML = ':' + seconds; } // the interval is set to 1 sec, so the timer refreshes and counts down every second if (seconds < 0) { confirm('Alert For your User!'); window.location.reload(); } }, 1000);
<p id="test"> </p>
您可以使用簡單的if
語句在輸出到屏幕之前更改輸出。
// check if seconds is single digit
if(seconds.toString().length === 1) { seconds = "0" + seconds }
// check if minutes is zero ( which is falsy )
if(!minutes) minutes = "";
// Inserts the timer into the Span timer
timeSpan.innerHTML = minutes + ':' + seconds;
您還可以聲明一個變量來保存對interval
的引用
// declare the interval as a variable so you can clear it!
let my_interval = setInterval(() => {
這使您可以在不再需要運行時清除它:
if (seconds < 0) {
confirm('Alert For your User!');
//clear the interval when it finishes!
clearInterval(my_interval);
}
}, 1000);
let timeSpan = document.querySelector("#timeSpan"); const mins = 1; // getting the exact time as of the page load const now = new Date().getTime(); // the math that is done for the actual countdown. So 10*60*1000 + the time retrieved from the page load. const deadline = mins * 60 * 1000 + now; // This is a function, however it is a JavaScript method and calls a function. // declare the interval as a variable so you can clear it! let my_interval = setInterval(() => { // Gets the current time var currentTime = new Date().getTime(); // gets the 'distance' between the deadline(10 mins) and the current time var distance = deadline - currentTime; // found out this method does the math for you, I had to look this up and research it on W3schools var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // check if seconds is single digit if(seconds.toString().length === 1) { seconds = "0" + seconds } // check if minutes is zero ( which is falsy ) if(!minutes) minutes = ""; // Inserts the timer into the Span timer timeSpan.innerHTML = minutes + ':' + seconds; // the interval is set to 1 sec, so the timer refreshes and counts down every second if (seconds < 0) { confirm('Alert For your User!'); //clear the interval when it finishes! clearInterval(my_interval); } }, 1000);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.