預覽效果圖：
使用到的知識點：
定時器 setInterval(函數，毫秒)：在指定的毫秒數後調用函數或執行一段代碼
取消定時器 clearInterval：取消由setInterval設置的定時器
函數(日期函數、parseInt函數)
parseInt()函數 ：可解析一個字符串,並返回一個整數
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--
需求：
電子商務網站中，商家爲了促銷商品而策劃一些活動，刺激消費者進行盲目消費 限時秒殺就是其中一種手段。
本次我們模擬的商品是 農夫山泉限時秒殺搶購
-->
<title>農夫山泉限時秒殺</title>
<!--CSS代碼：-->
<style type="text/css">
.box{ /*外圍的大盒子樣式*/
width: 702px;/*寬度702像素*/
height: 378px;/*高度378像素*/
background: url(../img/flash_sale.png);/*背景圖片*/
margin: 0 auto;/*上下爲0 水平居中*/
}
.box div{ /*外圍的大盒子內部的小盒子樣式*/
width: 50px; /*寬度50像素*/
height: 50px;/*高度50像素*/
border: 1px solid darkgray;/*邊界線1像素 實線 淺灰色*/
position: relative; /*使用相對定位*/
top: 260px; /*相對定位頂部距離260像素*/
float: left; /*使小盒子左浮動*/
left:305px ; /*相對定位左側距離305像素*/
margin-left: 5px; /*兩個小盒子之間空出5px*/
color: red; /*字體顏色爲紅色*/
text-align: center; /*字體居中顯示*/
line-height: 50px; /*字體行高50像素*/
}
</style>
</head>
<body>
<!--外圍的大盒子-->
<div class="box">
<!--剩餘的天數-->
<div id="d"></div>
<!--剩餘的小時-->
<div id="h"></div>
<!--剩餘的分鐘-->
<div id="m"></div>
<!--剩餘的秒數-->
<div id="s"></div>
</div>
</body>
</html>
<!--JavaScript代碼:-->
<script type="text/javascript">
//設置秒殺結束時間
var endTime = new Date("2018-05-18 09:29:00");
//把年月日時分秒的時間轉換成爲毫秒數
endSeconds = endTime.getTime();//結束時間的毫秒數
//定義變量 天數 小時 分鐘 秒數
var d = h = m = s = 0;
//設置定時器 實現一個秒殺效果
var timer = setInterval(qiang,1000);
function qiang(){
// 獲取當前系統時間
var nowTime = new Date();
// 獲取當前時間差---nowTime.getTime()現在時間的毫秒數
var remain = parseInt((endSeconds-nowTime.getTime())/1000);
//判斷秒殺是否過期
if(remain>0){
//1.計算剩餘天數 （除以60*60*24 取整數 獲取剩餘天數）
d = parseInt(remain/86400)
//2.計算剩餘小時（除以60*60 轉換成爲小時了 與24進行取模 獲取剩餘小時）
h = parseInt((remain/3600) % 24);
//3.計算剩餘分鐘（除以60 轉換成爲分鐘了 與60進行取模 獲取剩餘分鐘）
m = parseInt((remain/60) % 60);
//4.計算剩餘秒數（與60進行取模 獲取剩餘秒數）
s = parseInt((remain) % 60);
//統一利用兩位數 表示 剩餘的天、小時、分鐘、秒
d= d < 10 ? '0' + d:d;
h= h < 10 ? '0' + h:h;
m= m < 10 ? '0' + m:m;
s= s < 10 ? '0' + s:s;
}else{
// 秒殺過期 取消定時器
clearInterval(timer);
d = h = m = s = '00'
}
//將剩餘的天數、小時、分鐘、秒 小時到指定網頁中去
document.getElementById("d").innerHTML = d + '天';
document.getElementById("h").innerHTML = h + '時';
document.getElementById("m").innerHTML = m + '分';
document.getElementById("s").innerHTML = s + '秒';
}
</script>圖片素材
