Javascript:倒计时

   实现效果:

   在线演示地址: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{
    	 984px;
    	margin: 15px auto;
    }
    .unit{
    	display: inline-block;
    	float: left;
    	 220px;
    	padding: 10px;
        margin: 0 2px;
        border: 1px solid #e7e7e7;
    }

    .timer {
	  height: 100px;
	   100%;
	  text-align: center;
	  line-height: 100px;
	  background-color: #9d55b8;
	  color: #fff;
	  font-size: 22px;
	}


    .btn{
    	border: 0;
    	outline:0;
    	 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>

  

原文地址:https://www.cnblogs.com/kevinCoder/p/4584037.html