眾所周知,在網頁設計中,常常需要使用到倒計時的功能,比如促銷活動倒計時、秒殺活動倒計時等等。而javascript是實現網頁倒計時的最常用的語言之一。下面就讓我們來一起探討如何使用javascript實現網頁倒計時吧。
首先,在javascript中實現倒計時需要使用到定時器setInterval()和時間對象Date()。以秒為單位的倒計時算法如下:
function countdown(){ var now = new Date(); //獲取當前時間 var end = new Date('2021/05/31 00:00:00'); //設置截止時間 var leftTime = parseInt((end.getTime() - now.getTime())/1000); //計算剩余時間,單位秒 var hour = parseInt(leftTime / 3600); var minute = parseInt((leftTime - hour * 3600) / 60); var second = parseInt(leftTime - hour * 3600 - minute * 60); //顯示剩余時間 document.getElementById('hour').innerHTML = checkTime(hour); document.getElementById('minute').innerHTML = checkTime(minute); document.getElementById('second').innerHTML = checkTime(second); } //補位函數 function checkTime(i){ if(i<10){ i = "0" + i; } return i; } setInterval("countdown()",1000); //每隔一秒調用一次countdown函數,更新倒計時
以上代碼中,我們首先定義了countdown()函數,該函數中通過獲取當前時間和目標時間的差值,計算出剩余時間分別顯示在時、分、秒三個HTML元素中。同時,我們還定義了checkTime()函數,補位函數可以讓顯示的數字保持兩位數格式。最后,通過setInterval()函數實現倒計時不斷更新的效果。
除了以秒為單位的倒計時外,我們還可以根據需求實現以其他單位倒計時,例如以天為單位:
function countdown(){ var now = new Date(); //獲取當前時間 var end = new Date('2021/05/31'); //設置截止時間 var leftTime = parseInt((end.getTime() - now.getTime())/1000); //計算剩余時間,單位秒 var day = parseInt(leftTime / 86400); //計算剩余天數 var hour = parseInt((leftTime - day * 86400) / 3600); //計算剩余小時數 var minute = parseInt((leftTime - day * 86400 - hour * 3600) / 60); //計算剩余分鐘數 var second = parseInt(leftTime - day * 86400 - hour * 3600 - minute * 60); //計算剩余秒數 //顯示剩余時間 document.getElementById('day').innerHTML = checkTime(day); document.getElementById('hour').innerHTML = checkTime(hour); document.getElementById('minute').innerHTML = checkTime(minute); document.getElementById('second').innerHTML = checkTime(second); } //補位函數同上 setInterval("countdown()",1000); //每隔一秒調用一次countdown函數,更新倒計時
以上代碼中,我們通過將目標時間縮小至只包含年月日,從而使計算剩余時間時只考慮時間差距而不受時區影響,再以每天的秒數86400為單位分別計算剩余天數、小時數、分鐘數和秒數。HTML中的元素同樣需要根據需求調整。
總的來說,使用javascript實現倒計時功能十分簡單且靈活,只需要根據需求調整時間單位和HTML元素就可以實現自己所需的網頁倒計時效果了。