整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
例：倒計時
案例分析：
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，AAAAA是執行函數，BBBBB是執行周期。
二、創建一個盒子，在腳本中取得元素對象。
三、開始用setinterval方法了。
四、創建一個變量t，用來倒計時用。
五、加個判斷，讓它只倒數十秒。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
