近期在做排列五的彩票项目，每一期都有购彩时段，即用户打开这个排列五的页面时，会从服务器传来一个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>
标签：
JavaScript,倒计时,类
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“JavaScript实现的一个倒计时的类”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。