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>