JavaScript實現的一個倒計時的類

2024-05-06 16:16:38

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了JavaScript實現的一個倒計時的類,本文直接給出demo代碼,需要的朋友可以參考下

近期在做排列五的彩票項目，每一期都有購彩時段，即用戶打開這個排列五的頁面時，會從服務器傳來一個remaintime(離本次彩期結束的剩余時間)，然后這個時間在客戶端遞減呈現給用戶看，讓用戶獲得本次彩期的剩余時間。

實現原理挺簡單的，在此不在贅述，運行以下代碼查看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>小時<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節點的id

container: obj.container || 'container',

remaintime: Number(obj.remaintime) || 0,

//倒計時完成后的回調

callback: obj.callback || new Function

};

return obj;

},

resetTime: function(){

var that = this;

that.container.innerHTML = "已經截止";

},

//刷新時間

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--;

}

}

}

//時刻監聽

if(that.hours==0 && that.minutes==0 && that.seconds==0){

//執行回調

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;

},

//對于位數的處理，確保返回兩位數

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',

//服務器返回的剩余時間，單位為秒

remaintime: 10000,

//倒計時完成時的回調

callback: function(){

document.getElementById('remaintime').innerHTML = '已截止';

}

});

</script>

</body>

</html>