倒计时功能在网站开发过程中经常遇到，像各大电商网站做促销或者团购网站，经常看到距离活动结束还剩多少天，多少小时，多少分钟，多少秒。因些我最近写了一个插件，方便日后使用和扩展，由于提高开发速度，我基于jquery库利于面向对象的思想开发了。
这个倒计时插件js我给它起名为countDown,使用起来非常方便，只需配置几个参数而已，支持开始时间自定义，写好了与后台数据对接的接口，用这个插件可谓是省事再省事，省时再省时了，呵呵。
下面直接上代码：
/*** @Name： 易维护、可扩展定制的 倒计时插件* @Author： 大兵博客（虾兵） @Blog：http://ddbing.com/* @param 参数暂支持三个，cid,data,nowDate。* @param cid: 倒计时模块id,以区分多个倒计时模块的情况。* @param nowDate: 开始时间，不设置则默认为系统当前时间。* @param data: 初始化后台传过来的活动结束时间数据，JSON格式如： [ { "id":"1",time:"2015/09/05 10:27:30" }, { "id":"2",time:"2015/09/09 09:08:40" }, { "id":"3",time:"2015/06/03 12:30:10" } ];*/;(function ($, window, document, undefined) { var countDown = function(cid,data,nowDate){ this.cid = cid; this.data = data; this.nowDate = nowDate; }; countDown.prototype = { constructor: countDown, main: function(){ var that = this, data, newData = []; this.init(); data = that.backData; that.initTemp(data); that._init ? that._init = false:''; $.each(data,function(i,val){ if (val.ms) { newData.push({id:val.id,ms:val.ms}); }; }); that.backData = newData; setTimeout(function(){ that.handle(); },1000); }, //初始化处理 init: function(){ var that = this, data = that.data, backData=[], ms = 0, msEnd, msNow, _init = that._init = true; msNow = ( new Date(that.nowDate) ).getTime() || ( new Date() ).getTime(); $.each(data,function(i,val){ msEnd =( new Date(val.time) ).getTime(); ms = msEnd - msNow; if ( ms < 1000 ) { that.msHandle(ms,val.id,'-1'); }else{ that.msHandle(ms,val.id); }; }); }, //初始转化时间格式 msHandle: function(ms,id,flag){ var D, H, M, S, objTime = {}, backData = this.backData || [] ; if (flag < 0) { objTime = { id: id, no: flag }; backData.push(objTime); }else{ S = Math.floor( ms/1000 ); M = Math.floor( S/60 ); H = Math.floor( M/60 ); D = Math.floor( H/24 ); S = S % 60; M = M % 60; H = H % 24; objTime = { id:id, D:D, H:H, M:M, S:S, ms:ms }; objTime = this.normTime(objTime); backData.push(objTime); }; this.backData = backData; return this; }, //倒计时定时器 handle: function(){ var that = this, timer, data = that.backData, cid = this.cid; $.each(data,function(i,val){ var ms = val.ms; if (ms < 1000) { $('#'+cid).find('#count'+val.id).html('距离活动结束还剩：活动已结束'); }else{ ms -= 1000; that.msChange(ms, val.id); data[i].ms = ms; }; }); !!timer && clearTimeout(timer); timer = setTimeout(function(){ that.handle(); },1000); }, //ms处理 msChange: function(ms,id){ var D, H, M, S, objTime = {},cid = this.cid, data = this.backData; S = Math.floor( ms/1000 ); M = Math.floor( S/60 ); H = Math.floor( M/60 ); D = Math.floor( H/24 ); S = S % 60; M = M % 60; H = H % 24; objTime = { id:id, D:D, H:H, M:M, S:S }; objTime = this.normTime(objTime); $('#'+cid).find('#count'+id).children('.d').children('i').text( objTime.D ); $('#'+cid).find('#count'+id).children('.h').children('i').text( objTime.H ); $('#'+cid).find('#count'+id).children('.m').children('i').text( objTime.M ); $('#'+cid).find('#count'+id).children('.s').children('i').text( objTime.S ); }, //统一处理时刻格式 normTime: function(objTime){ for (var i in objTime) { if (objTime.hasOwnProperty(i) && i != 'id') { objTime[i] = objTime[i] < 10 ? '0' + objTime[i] : objTime[i]; }; }; return objTime; }, //初始化模板 initTemp: function(data){ var temp = ''; $.each(data,function(i,val){ if (val.no < 0) { temp +='距离活动结束还剩：活动已结束'; }else{ temp +='距离活动结束还剩：'+ val.D +'天' +''+ val.H +'时'+ val.M +'分' +''+ val.S +'秒' +''; }; }); temp +=''; $('#'+this.cid).append(temp); } }; window.countDown = countDown;}(jQuery, window, document)); |
这段代码就不多解释了，参数上面一段备注已很详细，js中每个功能函数也有备注。
HMTL中调用方式如下：
var time_data = [ { "id":"1",time:"2015/09/05 10:27:30" }, { "id":"2",time:"2015/09/09 09:08:40" }, { "id":"3",time:"2015/06/03 12:30:10" }, { "id":"4",time:"2015/10/12 13:15:30" }, { "id":"5",time:"2015/09/11 18:36:40" } ];/*** @param 创建倒计时对象* @param 倒计时模块id:countdown1* @param 倒计时初始化数据* @param 最后一个参数倒计时开始时间，格式如："2015/09/03 10:30:00"，不传则默认为系统当前时间*/var tCountDown = new countDown('countdown1',time_data,'2015/09/03 10:30:00');tCountDown.main(); |
这个插件你可以用到你网站的任何地方，商业非商业都行，不过恳请仁兄使用时保留备注或者注明代码来源，以对我写代码的鼓励及脑细胞的补偿，也方便日后迭代更新。使用时样式皮肤自行美化。
如果这篇文章对您有帮助，请前去 Github 点亮星星 star 来鼓励我写下去的勇气