JavaScript倒計時怎么寫？

例：倒計時

案例分析：

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

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

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

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

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

倒計時的算法：

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

結果會是負數的

2.用時間戳來做,用戶輸入時間總的毫秒數減去現在時間的總的毫秒數,得到的就是剩余時間的毫秒數.

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

//轉換公式如下：

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

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

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

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

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();
//相差的總秒數
var totalSeconds=parseInt((endDate - nowDate) / 1000);
//天數
var days=Math.floor(totalSeconds / (60 * 60 * 24));
//取模（余數）
var modulo=totalSeconds % (60 * 60 * 24);
//小時數
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 + "秒";
//延遲一秒執行自己
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的區別:

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

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

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

3 setInterval無視網絡延遲：如果調用ajax或其他服務, 他不會管是否返回回調, 會繼續按時執行。

4 setInterval不保證執行：因為setInterval會定時執行, 如果函數邏輯很長, 間隔時間內執行不完, 后續方法會被拋棄。

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

然間想做一個倒計時的例子。
用到的方法是setInterval（）。
更多文章請關注我的頭條號，落筆承冰

一、先了解一下setInterval，AAAAA是執行函數，BBBBB是執行周期。

二、創建一個盒子，在腳本中取得元素對象。

三、開始用setinterval方法了。

F12打開控制臺，你可以看到，每秒一個log的刷新。

四、創建一個變量t，用來倒計時用。

確實可以倒計時了，但它會倒數到負數，無窮盡倒數。

五、加個判斷，讓它只倒數十秒。

在線咨詢

上一篇：WEB前端開發工程師必備實用的50個CSS技巧
下一篇：2022可視化網頁生成工具盤點

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript倒計時怎么寫？

您的項目需求