原生JS實作的倒計時功能
效果圖
說明：在代碼第四十航行，設定你要倒計時的時間是的參照物
2019年8月16日 16:21:18 距離 2018-8-22 是負的360天 17小時 20分
代碼如下
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 class="title">距離光棍節還有</h1>
<div>
<span><span id="day" >00</span>天</span>
<strong><span id="hour">00</span>時</strong>
<strong><span id="minute">00</span>分</strong>
<strong><span id="second">00</span>秒</strong>
</div>
<script>
//此函數傳回兩個日期相差的 天 時 分 秒
function getInterval(start,end){
//時間差 毫秒值
var interval = end - start;
//轉換成秒 相差的總共的秒數
interval = interval/1000 ;
var day,hour,minute,second;
day = Math.floor(interval/60/60/24);
hour = Math.floor(interval/60/60%24);
minute = Math.floor(interval/60%60);
second = Math.floor(interval%60);
return {
day : day,
hour : hour,
minute : minute,
second : second
}
}
//倒計時
var spanDay = document.getElementById('day');
var spanHour = document.getElementById('hour');
var spanMinute = document.getElementById('minute');
var spanSecond = document.getElementById('second');
//顯示的是目前時間到下面這個時間的時間差
var end = new Date('2018-8-22');
setInterval(countdown,1000);
//先調用一次 這樣剛打開網頁就不用等1秒才開始定時器了
countdown();
function countdown(){
var start = new Date();
var obj = getInterval(start,end);
// 給數值不夠兩位的補0
obj.day = obj.day < 10 ?'0'+obj.day : obj.day;
obj.hour = obj.hour < 10 ?'0'+obj.hour : obj.hour;
obj.minute = obj.minute < 10 ?'0'+obj.minute : obj.minute;
obj.second = obj.second < 10 ?'0'+obj.second : obj.second ;
spanDay.innerText = obj.day;
spanHour.innerText = obj.hour;
spanMinute.innerText = obj.minute;
spanSecond.innerText = obj.second;
}
</script>
</body>
</html>