JavaScript 數(shù)字倒計時

數(shù)字倒計時是Web開發(fā)中常見的一種功能，特別是在活動頁面、電商促銷頁面等需要突出時間限制的場景中?！?0秒搶購”,”1小時限時免費領取”等都是數(shù)字倒計時典型的應用場景，那么如何使用JavaScript 實現(xiàn)一個數(shù)字倒計時呢？這篇文章將會介紹一種使用JavaScript實現(xiàn)數(shù)字倒計時的方式，并提供代碼示例。

基本思路

數(shù)字倒計時所要實現(xiàn)的功能是在一個指定的剩余時間內(nèi)，每隔一秒更新一次剩余的時間，并將剩余時間更新到頁面中。我們可以使用JavaScript中的setTimeout來實現(xiàn)每隔一秒刷新頁面上的剩余時間。

function countDown(){
var nowTime = new Date().getTime(); //獲取當前時間戳
var endTime = new Date("2020-12-31 23:59:59").getTime(); //獲取結(jié)束時間戳
var remianTime = endTime - nowTime; //計算剩余時間
var days = Math.floor(remianTime / (1000 * 60 * 60 * 24)); //計算剩余天數(shù)
var hours = Math.floor((remianTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); //計算剩余小時數(shù)
var minutes = Math.floor((remianTime % (1000 * 60 * 60)) / (1000 * 60)); //計算剩余分鐘數(shù)
var seconds = Math.floor((remianTime % (1000 * 60)) / 1000); //計算剩余秒數(shù)
//將剩余時間更新到頁面中
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
//每隔一秒刷新剩余時間
setTimeout("countDown()", 1000);
}

HTML 結(jié)構(gòu)

在頁面中需要定義一個與JavaScript中的id相對應的HTML元素，并將剩余時間更新到相應的元素中。

<div id="countdown">
<span id="days"></span> 天
<span id="hours"></span> 小時
<span id="minutes"></span> 分鐘
<span id="seconds"></span> 秒
</div>

完整代碼

將以上兩段代碼組合起來，即可得到一個完整的數(shù)字倒計時的實現(xiàn)，如下所示：

<div id="countdown">
<span id="days"></span> 天
<span id="hours"></span> 小時
<span id="minutes"></span> 分鐘
<span id="seconds"></span> 秒
</div>
<script type="text/javascript">
function countDown(){
var nowTime = new Date().getTime(); //獲取當前時間戳
var endTime = new Date("2020-12-31 23:59:59").getTime(); //獲取結(jié)束時間戳
var remianTime = endTime - nowTime; //計算剩余時間
var days = Math.floor(remianTime / (1000 * 60 * 60 * 24)); //計算剩余天數(shù)
var hours = Math.floor((remianTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); //計算剩余小時數(shù)
var minutes = Math.floor((remianTime % (1000 * 60 * 60)) / (1000 * 60)); //計算剩余分鐘數(shù)
var seconds = Math.floor((remianTime % (1000 * 60)) / 1000); //計算剩余秒數(shù)
//將剩余時間更新到頁面中
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
//每隔一秒刷新剩余時間
setTimeout("countDown()", 1000);
}
countDown(); //頁面加載完后啟動倒計時
</script>

總結(jié)

本文介紹了如何使用JavaScript實現(xiàn)一個數(shù)字倒計時的方法，并提供了相應的HTML和JavaScript代碼示例。在實現(xiàn)數(shù)字倒計時的過程中，需要對剩余時間進行逐秒計算并將計算結(jié)果更新到頁面中。