JavaScript倒計時怎么寫？

例：倒計時

案例分析：

1.這個倒計時是不斷變化的，因此需要定時器來自動變化(setInterval)

2.三個黑色盒子里面分別存放時分秒

3.三個黑色盒子利用innerHTML放入計算的小時分鐘秒數(shù)

4.第一次執(zhí)行也是間隔毫秒數(shù)，因此剛刷新頁面會有空白

5.最好采取封裝函數(shù)的方式，這樣可以先調(diào)用一次這個函數(shù)，防止剛開始刷新頁面有空白問題。

倒計時的算法：

1.核心算法:輸入的時間減去現(xiàn)在的時間就是剩余的時間,即倒計時,但是不能拿著時分秒相減,比如05分減去25分,

結果會是負數(shù)的

2.用時間戳來做,用戶輸入時間總的毫秒數(shù)減去現(xiàn)在時間的總的毫秒數(shù),得到的就是剩余時間的毫秒數(shù).

3.把剩余時間總的毫秒數(shù)轉換為天、時、分、秒、（時間戳轉換為時分秒）*/

//轉換公式如下：

/*d=parseInt(總秒數(shù)/60/60/24); //計算天數(shù)

h=parseInt(總秒數(shù)/60/60%24); //計算小時

m=parseInt(總秒數(shù)/60%24); //計算分鐘

s=parseInt(總秒數(shù)%60); //計算當前秒數(shù)*/

function conus(time){

var dqtime=+new Date(time);

var zqtime=+new Date();

var times=(dqtime - zqtime) / 1000;

var t=parseInt(times / 60 / 60 / 24);//天

t=t < 10 ? '0' + t:t;

var s=parseInt(times / 60 / 60 % 24);//時

s=s < 10 ? '0' + s:s;

var f=parseInt(times / 60 % 60);//分

f=f < 10 ? '0' + f:f;

var m=parseInt(times % 60);//秒

m=m < 10 ? '0' + m:m;

return t + '天' + s + '時' + f + '分' + m + '秒';

}

console.log(conus('2022-6-7 12:00:00'));

源碼如下

imeDown.js

/*
時間倒計時插件
TimeDown.js
*/
function TimeDown(id, endDateStr) {
//結束時間
var endDate=new Date(endDateStr);
//當前時間
var nowDate=new Date();
//相差的總秒數(shù)
var totalSeconds=parseInt((endDate - nowDate) / 1000);
//天數(shù)
var days=Math.floor(totalSeconds / (60 * 60 * 24));
//取模（余數(shù)）
var modulo=totalSeconds % (60 * 60 * 24);
//小時數(shù)
var hours=Math.floor(modulo / (60 * 60));
modulo=modulo % (60 * 60);
//分鐘
var minutes=Math.floor(modulo / 60);
//秒
var seconds=modulo % 60;
//輸出到頁面
document.getElementById(id).innerHTML="還剩:" + days + "天" + hours + "小時" + minutes + "分鐘" + seconds + "秒";
//延遲一秒執(zhí)行自己
setTimeout(function () {
TimeDown(id, endDateStr);
}, 1000)
}

html

<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>時間倒計時</title>
<script src="TimeDown.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="show">
</div>
<script type="text/javascript">
TimeDown("show", "2024-03-9 8:00:45");
</script>
</form>
</body>
</html>

顯示效果：

還剩:2天19小時29分鐘5秒

關于setTimeout與setInterval的區(qū)別:

setTimeout只會執(zhí)行一次, 在執(zhí)行完成后, 重新啟動新的Timeout, 時間runtime計算設置為差時, 減少出現(xiàn)間隔越來越大的情況; 而setInterval()會導致間隔越來越大的情況, 而出現(xiàn)執(zhí)行時間不準確的問題:

1 Javascript會把執(zhí)行的回調(diào)函數(shù)、瀏覽器的觸發(fā)事件、UI渲染事件，先放到隊列中, 隊列根據(jù)先進先出的規(guī)則, 依次執(zhí)行他們, 當執(zhí)行到隊列中的setInterval時很難保證其與setTimeout同步關系還保持。

2 setInterval無視代碼錯誤：代碼報錯, 但是setInterval依舊會按時執(zhí)行, 不會中斷。

3 setInterval無視網(wǎng)絡延遲：如果調(diào)用ajax或其他服務, 他不會管是否返回回調(diào), 會繼續(xù)按時執(zhí)行。

4 setInterval不保證執(zhí)行：因為setInterval會定時執(zhí)行, 如果函數(shù)邏輯很長, 間隔時間內(nèi)執(zhí)行不完, 后續(xù)方法會被拋棄。

5 setInterval會受瀏覽器狀態(tài)影響、最小化、最大化、tab切換等外界因素的影響。