标签：
倒计时是前端经常要处理的
一般有两种情况：
1、秒杀类型，后端根据服务器时间给出当前距离秒杀点的毫秒数（这么处理防止客户端和服务器的时间不一致）
倒计时：0天0时4分11妙
2、客户端距离一个时间点（比如距离世界杯还有多久之类的）
先搞第一种：有时一个集合页上有多个到时间，几十个.. ；于是考虑到性能和后续操作 oop组件化自然优势明显（react 也是把每个功能 组件化。思想一样）
好先上代码：1、秒杀类型
<!DOCTYPE html> <html> <head> <title>同步倒计时</title> <meta charset="utf-8"/> </head> <body> <span id="timebox1">11:21:55</span> <ul id="ul1"></ul> <script type="text/javascript"> //TimeNew(id*,倒计时毫秒*,倒计时结束回调) function TimeNew(id,timedata,endfn){ this.id=id; this.obj=document.getElementById(this.id); this.timedata=Math.floor(timedata/1000); this.endfn=endfn||undefined; this.tdate={};//天t，时s，分f，秒m this.tval; //定时器 this.init(); }; TimeNew.prototype.init=function(){ this.timeTrade() this.obj.innerHTML=‘<em>‘+this.tdate.t+‘</em>天<em>‘+this.tdate.s+‘</em>时<em>‘+this.tdate.f+‘</em>分<em>‘+this.tdate.m+‘妙</em>‘; return this; }; TimeNew.prototype.setIntervalFn=function(){ var _this=this; clearInterval(this.tval); this.tval=setInterval(function(){ _this.timeDataFn(); }, 1000); return this; }; TimeNew.prototype.timeDataFn=function() { if (this.timedata <= 0) { if(this.endfn){this.endfn()}; clearInterval(this.tval); } else { this.timedata--; this.timeTrade(); this.obj.innerHTML=‘<em>‘+this.tdate.t+‘</em>天<em>‘+this.tdate.s+‘</em>时<em>‘+this.tdate.f+‘</em>分<em>‘+this.tdate.m+‘妙</em>‘; }; }; TimeNew.prototype.timeTrade=function(){ this.tdate.t=Math.floor(this.timedata/86400); this.tdate.s=Math.floor(this.timedata%86400/3600); this.tdate.f=Math.floor(this.timedata%86400%3600/60); this.tdate.m=Math.floor(this.timedata%60); return this; }; //试用方法 ======================================== new TimeNew(‘timebox1‘,15152,function(){this.obj.innerHTML=this.id+‘:倒计时结束了！然后我改变了他的innerHTML‘}).setIntervalFn(); //动态添加 var c=[ { title:‘倒计时1：‘, time:262121 }, { title:‘倒计时2：‘, time:8655 }, { title:‘倒计时3：‘, time:89898 }, { title:‘倒计时4：‘, time:25660 } ]; var oul=document.getElementById(‘ul1‘); for (var i=0;i<c.length; i++) { var d=‘<li>‘+c[i].title+‘<span id=d‘+c[i].time+‘></span></li>‘; oul.innerHTML+=d; }; //声明多个用循环 for (var i=0;i<c.length; i++) { new TimeNew(‘d‘+c[i].time,c[i].time,timeCallback).setIntervalFn(); }; function timeCallback(){ console.log(this.id+‘:倒计时结束了！‘) }; </script> </body> </html>
2、客户端距离一个时间点（比如距离世界杯还有多久之类的）
哈哈哈不好意思，这会比较忙，回头再整理这个。
所以还希望看到这里的朋友多关注我的动态。关于这些常用组件我会不断整理完善发布到上面供大家试用。
第二种方案，明天见....
标签：
原文地址：http://www.cnblogs.com/SongYiJian/p/5583502.html
