最近將BOM重新復習了一遍，本想使用定時器給女朋友做一個生日倒計時，奈何canvas都忘了。所以模擬了一個京東的秒殺專場倒計時。
各位小伙伴有什么建議和意見，請不吝賜教。
下面是京東首頁的截圖：
利用BOM提供的setInterval（）方法可以實現這樣的一個小功能。
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/模擬京東倒計時.css"/>
<script src="js/模擬京東倒計時.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 倒計時超鏈接 -->
<a href="https://miaosha.jd.com" id="countdownLink">
<!-- 秒殺框標題 -->
<div id="seckill">京東秒殺</div>
<!-- 促銷特殊時間：時間場 -->
<div id="specialTime"></div>
<!-- 倒計時剩余時間 -->
<div id="leftTime">
<span id="hour">00</span>
<span id="minute">00</span>
<span id="second">00</span>
</div>
</a>
</body>
</html>
CSS樣式表：
/* 清除默認內外邊距 */ *{ padding: 0; margin: 0; } /* 設置超鏈接的樣式 */ #countdownLink{ /* 將其變為塊元素之后，設置寬高，寬高和背景圖片的大小一致 */ display: block; width: 191px; height: 261px; /* 設置超鏈接背景圖片，點擊圖片任何位置都能訪問該超鏈接 */ background-image: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/4a15d8883775742e3efbb850ae14def7.png); /* 去掉超鏈接里文字的下划線 */ text-decoration: none; } /* 設置秒殺框標題的樣式 */ #seckill{ /* 寬度設置為父元素的100%，也就是191px */ width:100%; /* “京東秒殺”字體樣式 */ font-family: "黑體"; font-weight: bold; color:white; font-size: 32px; /* “京東秒殺”在其所在盒子里居中 */ text-align: center; /* 將京東秒殺的盒子居中,由於寬度是100%，故僅設置上下外邊距即可，在這里習慣性加auto*/ margin: 40px auto; } /* 消除#countDownLink和#seckill的垂直外邊距重疊 */ #countdownLink::before, #countdownLink::after{ content:""; display: table; clear: both; } /* 設置場次字體大小*/ #specialTime{ /* 寬度設置為父元素的100%，也就是191px */ width:100%; height:20px; /* 內容居中 */ text-align: center; /* 字體樣式 */ /* 文字大小設置默認值為15px，后面選擇器里會有變動 */ font-size: 15px; color:white; font-family: "黑體"; font-weight: bold; /* 設置一個上下外邊邊距,其中,上外邊距會與最上邊盒子的下外邊距重合一部分 */ margin: 75px auto 20px; } /* JS根據場次信息添加的標簽,顯示時間,由於時間字體偏大,就單獨設置一個p標簽 */ #specialTime #strong{ display: inline-block; font-size: 23px; } /* JS添加的標簽,顯示場次信息里的中文,字體偏小 */ #specialTime #nomal{ display: inline-block; /* 繼承父元素字體大小 */ /* 調節根據基線的偏移值,使得場次時間與中文對齊 */ vertical-align: 3px; } /* 設置剩余時間所在盒子的樣式 */ #leftTime{ width: 100%; text-align: center; } /* 時間子盒子的樣式 */ #hour,#minute,#second{ /* 寬高 */ width: 30px; height: 30px; /* 背景 */ background-color: black; /* 字體 */ color:white; font-family: "黑體"; font-weight: bold; font-size:25px; /* 文字居中 */ text-align: center; display: inline-block; /* 左右外邊距*/ margin:0 5px; /* 開啟決相對定位 */ position: relative; } /* 在時和分的后面添加一個： */ #hour::after,#minute::after{ content: ":"; position: absolute; /* 調一調冒號的位置，使其與數字對齊 */ left: 32px; top: -3px; }
JS代碼：
window.addEventListener("load",function(){
//設置秒殺專場開始時間基於1970年的毫秒數
var startTime = +new Date("2020-03-06T17:00:00");
//設置秒殺專場當天的00:00時基於1970年的毫秒數
var zeroOclock = +new Date("2020-03-06T00:00:00");
//將上述兩個時間相減，將結果換算成24小時制的時間放在specialTime里顯示用於表明多少點的場次
var h1 = (startTime-zeroOclock)/1000/60/60;
//若時間為個數，前面補個0
h1 = h1<10?"0"+h1:h1;
//獲取顯示場次信息的那個div元素的對象
var box = document.getElementById("specialTime");
//在里面添加兩個p標簽，分別存放時間和描述性中文
box.innerHTML = "<p id=\"strong\">"+ h1 + ":00</p>" + "<p id=\"nomal\">點場 倒計時</p>";
//獲取時分秒盒子的對象
var span = document.getElementsByTagName("span");
//獲取當前時間基於1970年的毫秒數
var now = +new Date;
// 如果開場時間未到，則不停地計時
if((startTime - now)>0){
cal();
var countDown = setInterval(cal,1000);
}
function cal(){
// 重新獲取當前時間
now = +new Date();
// 計算開場時間與現在時間的差
var leftTime = startTime - now;
// 分別計算年月日
var h = parseInt(leftTime/1000/60/60%24);
h = h < 10 ? "0" + h : h;
var m = parseInt(leftTime/1000/60%60);
m = m < 10 ? "0" + m : m;
var s = parseInt(leftTime/1000%60);
s = s < 10 ? "0" + s : s;
// 如果時間到了，則停止計時，時間沒到的話，就更新倒計時
if((h+m+s)!="00000000"){
span[0].innerHTML = h;
span[1].innerHTML = m;
span[2].innerHTML = s;
}else{
span[2].innerHTML = s;
clearInterval(countDown);
}
}
})
輸出結果（IE8及以下不兼容）：
