快捷導(dǎo)航

JavaScript實(shí)現(xiàn)的一個(gè)倒計(jì)時(shí)的類(lèi)

更新時(shí)間：2015年03月12日 11:19:57 投稿：junjie

這篇文章主要介紹了JavaScript實(shí)現(xiàn)的一個(gè)倒計(jì)時(shí)的類(lèi),本文直接給出demo代碼,需要的朋友可以參考下

近期在做排列五的彩票項(xiàng)目，每一期都有購(gòu)彩時(shí)段，即用戶(hù)打開(kāi)這個(gè)排列五的頁(yè)面時(shí)，會(huì)從服務(wù)器傳來(lái)一個(gè)remaintime（離本次彩期結(jié)束的剩余時(shí)間），然后這個(gè)時(shí)間在客戶(hù)端遞減呈現(xiàn)給用戶(hù)看，讓用戶(hù)獲得本次彩期的剩余時(shí)間。

實(shí)現(xiàn)原理挺簡(jiǎn)單的，在此不在贅述，運(yùn)行以下代碼查看demo：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>index</title>
<style type="text/css">
em{color:#f00;}
</style>
</head>

<body>
<div id="remaintime"></div>
<script type="text/javascript">

var TheTime = function(){
 this.init.apply(this,arguments);
};

TheTime.prototype = {
 init: function(obj){
 var that = this;
 obj = that.buildParam(obj);
 that.callback = obj.callback;
 var container = that.container = document.getElementById(obj.container);
 container.innerHTML = '<em></em>小時(shí)<em></em>分鐘<em></em>秒';
 var hourSpace = that.hourSpace = container.getElementsByTagName('em')[0];
 var minuteSpace = that.minuteSpace = container.getElementsByTagName('em')[1];
 var secondSpace = that.secondSpace = container.getElementsByTagName('em')[2];
 if(obj.remaintime==0){
  that.resetTime();
  return;
 }

 that.hours = Math.floor(obj.remaintime/3600);
 that._remainder1 = obj.remaintime % 3600;
 that.minutes = Math.floor(that._remainder1/60);
 that.seconds = that._remainder1 % 60;
 var timer = that.timer = setInterval(function(){
  that.renderTime.apply(that);
 },1000);
 },
 buildParam: function(obj){
 obj = {
  //container為dom節(jié)點(diǎn)的id
  container: obj.container || 'container',
  remaintime: Number(obj.remaintime) || 0,
  //倒計(jì)時(shí)完成后的回調(diào)
  callback: obj.callback || new Function
 };
 return obj;
 },
 resetTime: function(){
 var that = this;
 that.container.innerHTML = "已經(jīng)截止";
 },
 //刷新時(shí)間
 renderTime: function(){
 //debugger;
 var that = this;
 if(that.seconds>0){
  that.seconds--;
 }else{
  that.seconds = 59;
  if(that.minutes>0){
  that.minutes--;
  }else{
  that.minutes = 59;
  if(that.hours>0){
   that.hours--;
  }
  }
 }
 
 //時(shí)刻監(jiān)聽(tīng)
 if(that.hours==0 && that.minutes==0 && that.seconds==0){
  //執(zhí)行回調(diào)
  that._callback();
 }
 var bitHandle = that.bitHandle;

 var _hour = bitHandle(that.hours);
 var _minute = bitHandle(that.minutes);
 var _second = bitHandle(that.seconds);
 that.hourSpace.innerHTML = _hour;
 that.minuteSpace.innerHTML = _minute;
 that.secondSpace.innerHTML = _second;
 },
 //對(duì)于位數(shù)的處理，確保返回兩位數(shù)
 bitHandle: function(num){
 var str = num.toString();
 if(str.length<2){
  str = 0 + str;
 }
 return str;
 },
 _callback: function(){
 var that = this;
 clearInterval(that.timer);
 that.callback();
 }

};

new TheTime({
 //容器id
 container: 'remaintime',
 //服務(wù)器返回的剩余時(shí)間，單位為秒
 remaintime: 10000,
 //倒計(jì)時(shí)完成時(shí)的回調(diào)
 callback: function(){
 document.getElementById('remaintime').innerHTML = '已截止';
 }
});
</script>
</body>
</html>

您可能感興趣的文章: