jQuery 倒數計時效果詳解

admin發表於2018-11-28
jQuery

倒數計時效果有著廣泛的應用，比如奧運會倒數計時、高考倒數計時和放假倒數計時等。

本章節分享一個比較美觀且實用的倒數計時效果。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>倒數計時效果程式碼-螞蟻部落</title>
<style type="text/css">
* {
  padding:0;
  margin:0;
}
.colockbox {
  width:250px;
  height:30px;
  overflow:hidden;
  color:#000000;
  background:url(mytest/jQuery/colockbg.png) no-repeat;
  margin:0px auto;
}
.colockbox span {
  float:left;
  display:block;
  width:40px;
  height:29px;
  line-height:29px;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  color:#ffffff;
  margin-right:22px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(function(){ 
  countDown("2019/2/3 6:30:59","#colockbox1"); 
}); 
function countDown(time,id){ 
  var day_elem=$(id).find('.day'); 
  var hour_elem=$(id).find('.hour'); 
  var minute_elem=$(id).find('.minute'); 
  var second_elem=$(id).find('.second'); 
  var end_time = new Date(time).getTime();
  var sys_second = (end_time-new Date().getTime())/1000; 
  var timer = setInterval(function(){ 
    if(sys_second>1) { 
      sys_second-=1; 
      var day=Math.floor((sys_second/3600)/24); 
      var hour=Math.floor((sys_second/3600)%24); 
      var minute=Math.floor((sys_second/60)%60); 
      var second=Math.floor(sys_second%60); 
      $(day_elem).text(day);
      $(hour_elem).text(hour<10?"0"+hour:hour);
      $(minute_elem).text(minute<10?"0"+minute:minute); 
      $(second_elem).text(second<10?"0"+second:second);
    } 
    else { 
      clearInterval(timer); 
    } 
  }, 1000); 
} 
</script>
</head>
<body>
<div class="colockbox" id="colockbox1"> 
  <span class="day">00</span> 
  <span class="hour">00</span> 
  <span class="minute">00</span> 
  <span class="second">00</span> 
</div>
</body>
</html>

一.程式碼註釋:

（1）.$(function(){}）,當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.countDown("2016/2/3 6:30:59","#colockbox1")，呼叫函式，第一個引數是到期的時間，第二個是div的id屬性值。

（3）.function countDown(time,id){}，宣告此函式。

（4）.var day_elem=$(id).find('.day')，獲取div下class屬性值為day的物件。

（5）.var hour_elem=$(id).find('.hour')，獲取div下class屬性值為hour的物件。

（6）.var minute_elem=$(id).find('.minute')，獲取div下class屬性值為minute的物件。

（7）.var second_elem=$(id).find('.second')，獲取div下class屬性值為second的物件。

（8）.var end_time=new Date(time).getTime()，獲取到期事件的時間戳。

（9）.var sys_second=(end_time-new Date().getTime())/1000，獲取到期時間和當前時間相差的秒數。

（10）.var timer=setInterval(function(){}，1000），每隔一秒執行一次函式。

（11）.if(sys_second>1) ，如果相差的秒大於1。

（12）.sys_second-=1，秒減一。

（13）.var day=Math.floor((sys_second/3600)/24)，獲取相差的天數。

（14）.var hour=Math.floor((sys_second/3600)%24)，獲取相差的小時數，注意後面是取模運算。

（15）.var minute=Math.floor((sys_second/60)%60)，獲取相差的分鐘數。

（16）.var second=Math.floor(sys_second%60)，獲取相差的秒數。

（17）.$(day_elem).text(day)，將天寫入span元素。

（18）.$(hour_elem).text(hour<10?"0"+hour:hour)，將小時寫入span，如果小時數小於10，前面加0，後面同樣的道理。

（19）.clearInterval(timer)，如果相差的秒數到0，就停止計時器函式setInterval的執行。

二.相關閱讀:

（1）.find()函式可以參閱jQuery find()方法一章節。

（2）.Date()建構函式可以參閱JavaScript Date()建構函式引數一章節。

（3）.getTime()函式可以參閱JavaScript getTime()一章節。

（4）.Math.floor()函式可以參閱JavaScript Math.floor()一章節。

（5）.setInterval()函式可以參閱setInterval()用法一章節。

（6）.clearInterval()函式可以參閱clearInterval()方法一章節。

相關文章