首頁 > 開發者 > 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{ 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>
Javascript:倒計時
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
