标签：
实现效果：
在线演示地址：http://codepen.io/anon/pen/VLzgYO
DEMO:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时:By @me-kevin</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,li{list-style: none;}
.goodsList{
width: 984px;
margin: 15px auto;
}
.unit{
display: inline-block;
float: left;
width: 220px;
padding: 10px;
margin: 0 2px;
border: 1px solid #e7e7e7;
}
.timer {
height: 100px;
width: 100%;
text-align: center;
line-height: 100px;
background-color: #9d55b8;
color: #fff;
font-size: 22px;
}
.btn{
border: 0;
outline:0;
width: 100%;
margin: 5px 0;
height: 36px;
cursor: pointer;
line-height: 36px;
border-radius: 3px;
text-shadow:0 0 1px rgba(0,0,0,.3);
background-color: #56abe4;
color: #fff;
}
</style>
</head>
<body>
<div class="goodsList">
<ul class="unit">
<li>June 17,2015 20:15:0</li>
<li><button class="btn">开始</button></li>
<li class="timer">剩余:00天01时00分00妙</li>
</ul>
<ul class="unit">
<li>June 17,2015 17:53:0</li>
<li><button class="btn">开始</button></li>
<li class="timer">剩余:00天01时00分00妙</li>
</ul>
<ul class="unit">
<li>June 17,2015 20:3:0</li>
<li><button class="btn">开始</button></li>
<li class="timer">剩余:00天01时00分00妙</li>
</ul>
<ul class="unit">
<li>June 17,2015 19:3:0</li>
<li><button class="btn">开始</button></li>
<li class="timer">剩余:00天01时00分00妙</li>
</ul>
</div>
<script type="text/javascript">
var ulArr=document.getElementsByTagName(‘ul‘);
for(var i=0;i<ulArr.length;i++){
ulArr[i].index=i;
counter(ulArr[i]);
}
function counter(aUl){
var aLi=aUl.getElementsByTagName(‘li‘);
var timer=null;
aLi[1].onclick=function(){
clearInterval( timer );
timer=setInterval(function(){
var startTime=new Date();//开始时间
var endTime=new Date(aLi[0].innerHTML);//结束时间
var t = Math.floor((endTime - startTime)/1000);// 毫秒 -> 秒
var str = Math.floor(t/86400)+‘天‘+Math.floor(t%86400/3600)+‘时‘+Math.floor(t%86400%3600/60)+‘分‘+t%60+‘秒‘;
// 天：Math.floor(t/86400)
// 时：Math.floor(t%86400/3600)
// 分：Math.floor(t%86400%3600/60)
// 秒：t%60
// 数字形式：new Date( 2013,4,1,9,48,12 );
// 字符串形式：new Date(‘June 10,2013 12:12:12‘);
// January、February、March、April、May、June、
// July、August、September、October、November、December
if(t>=0){
aLi[2].innerHTML=str;
}else{
clearInterval( timer );//到达指定时间时，停止计数器
alert(‘计时已结束‘);
}
},1000)
}
}
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/kevinCoder/p/4584037.html
