setInterval()是JS的一個全局函數(shù)，可以按照指定的周期（以毫秒計）來調用函數(shù)或計算表達式。setInterval()方法會不停地調用函數(shù)，直到clearInterval()被調用或窗口被關閉。由于setInterval的循環(huán)特性，所以用于計算時間特別合適。
JS實現(xiàn)思路也特別簡單：獲取目標時間和當前時間 => 計算時間差 => 重復計算并渲染到頁面
- 首先獲取兩個時間點：
var date = new Date('2022/1/1 00:00:00').getTime();//獲取目標時間的時間戳
var now = new Date().getTmie();//當前時間戳
- 上面代碼獲取了兩個時間點，下面計算一下時間差：
var second = Math.floor((date - now) / 1000);//時間差秒數(shù)
var day = Math.floor(second / 86400);//時間差天數(shù)
second = second % 86400;//除去天數(shù)剩下的秒數(shù)
var hour = Math.floor(second / 3600);//剩下秒數(shù)的小時數(shù)
second %= 3600;//除去小時數(shù)剩下的秒數(shù)
var minute = Math.floor(second / 60);//剩下秒數(shù)的分鐘數(shù)
second %= 60;//除去分鐘數(shù)剩下的秒數(shù)
- 上面計算完成后我們獲取到了時間差的天數(shù)、小時、分鐘和秒數(shù)，如果要年數(shù)可以自行計算，但是覺得沒有太大必要。然后將上面封裝成函數(shù)并重復1秒調用即可，先簡單打印驗證一下是否實現(xiàn)效果。
function getDate(){
var date = new Date('2022/1/1 00:00:00').getTime();//獲取目標時間的時間戳
var now = new Date().getTmie();//當前時間戳
var second = Math.floor((date - now) / 1000);//時間差秒數(shù)
var day = Math.floor(second / 86400);//時間差天數(shù)
second = second % 86400;//除去天數(shù)剩下的秒數(shù)
var hour = Math.floor(second / 3600);//剩下秒數(shù)的小時數(shù)
second %= 3600;//除去小時數(shù)剩下的秒數(shù)
var minute = Math.floor(second / 60);//剩下秒數(shù)的分鐘數(shù)
second %= 60;//除去分鐘數(shù)剩下的秒數(shù)
console.log("還剩 "+day+" 天 "+hour+" 小時 "+minute+" 分鐘 "+second+" 秒 ");
}
setInterval(getDate, 1000);//每秒調用上面的函數(shù)，控制臺每秒輸出
后面渲染的操作只需替換輸出控制臺的操作即可，這里也簡單的實現(xiàn)一下，實現(xiàn)的方法也不止一種。
- 完整示例HTML代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>setInterval實現(xiàn)倒計時</title>
<style>
*{padding: 0;margin: 0;}
.container {
font-size: 60px;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
#datetime {
color: red;
}
.time {
color: black;
}
</style>
</head>
<body>
<div class="container">
<div>距離2022年還有</div>
<div id="datetime"></div>
</div>
<script>
var datetime = document.getElementById('datetime');
function fresh(n) {
return n >= 0 && n < 10 ? '0' + n : '' + n;
}
function getDate(){
var date = new Date('2022/1/1 00:00:00').getTime();//獲取目標時間的時間戳
var now = new Date().getTime();//當前時間戳
var second = Math.floor((date - now) / 1000);//時間差秒數(shù)
var day = Math.floor(second / 86400);//時間差天數(shù)
second = second % 86400;//除去天數(shù)剩下的秒數(shù)
var hour = Math.floor(second / 3600);//剩下秒數(shù)的小時數(shù)
second %= 3600;//除去小時數(shù)剩下的秒數(shù)
var minute = Math.floor(second / 60);//剩下秒數(shù)的分鐘數(shù)
second %= 60;//除去分鐘數(shù)剩下的秒數(shù)
var str = fresh(day) + '<span class="time">天</span>' +
fresh(hour) + '<span class="time">小時</span>' +
fresh(minute) + '<span class="time">分鐘</span>' +
fresh(second) + '<span class="time">秒</span>';
datetime.innerHTML = str;
}
setInterval(getDate, 1000);//每秒調用上面的函數(shù)
</script>
</body>
</html>
效果預覽圖：
2022倒計時
白駒過隙，轉眼間已近歲末。時間在悄然流逝，年華在匆匆而過；時光無限荏苒，光陰不再重復，記憶永遠成了昨天。
