在该笔记中将学到列表展示中倒计时效果的方法与展示效果
本系列的是参考慕课网 vivian老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。
显示效果如下：
当团购结束的时候，会显示结束的字样：
使用 Date 类型来获得需要的时间
下面显示的是 Date 类型相关的函数：
限时抢购效果
可以使用 Date 设置结束时间，然后计算当前时间和结束时间的差值，一般使用 Date.getTime() 进行时间的差值计算。
计算出来的时间差可以使用取余(%)计算符来求得剩余的天数，小时，分钟和秒钟数。
<html>
<head>
<title>限时抢购</title>
<meta charset="uft-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
width: 500px;
height: 50px;
line-height: 50px;
margin: 200px auto;
background-color: #ccc;
text-align: center;
}
.wrap span{
display: inline-block;
margin: 0 20px;
}
</style>
<script>
window.onload = function(){
let setTime = setInterval(function(){
let endDate = new Date("2016/11/15,15:28:12");
let currDate = new Date();
let leftTime = parseInt((endDate.getTime() - currDate.getTime())/1000);
if(leftTime <= 0){
document.getElementsByClassName("wrap")[0].innerHTML = "团购结束";
clearInterval(setTime);
}
let d = parseInt(leftTime/(24*60*60));
let h = parseInt((leftTime/(60*60))%24);
let m = parseInt((leftTime/60)%60);
let s = leftTime%60;
document.getElementById("day").innerHTML = d;
document.getElementById("hour").innerHTML = h;
document.getElementById("minu").innerHTML = m;
document.getElementById("sec").innerHTML = s;
}, 500);
}
</script>
</head>
<body>
<div class="wrap">
<p>还剩 <span id="day"></span> 天 <span id="hour"></span> 小时 <span id="minu"></span> 分 <span id="sec"></span> 秒结束 </p>
</div>
</body>
</html>