//倒计时 //注意:使用之前必须要在被绑对象上面自定义两个时间属性data-timeStart和data-timeEnd属性, //常见用法:比较适用于后台代码模板解释使用{{each Data as value i}}xxxx{{/each}} var TimerCountDownArrList=[]; (function($,TimerCountDownArrList){ $.fn.showTimeCountDown=function(options){ var defaluts={ //startDate:'',//服务器当前时间,也可以是开始时间;建议格式:2017-03-02 18:39:50//每刷新一次都不同(注:如果没有则默认使用本机系统时间); //lastDate:'',//截止时间,倒计时结束的时间,建议格式:2017-03-02 18:39:50//一般都是固定的(必填) timeStartAttr:'',//存放开始时间的自定义属性名,不传则默认取data-timeStart的值 timeEndAttr:'',//存放截止时间的自定义属性名,不传默认取data-timeEnd的值 IsInitInterval:false,//是否要初始化定时器,也就是清掉之前的定时器,滚动加载有定时器的时候这里改为false;在不同tab列切换的时候会用到true;切换的时候清掉前面的定时器再新开定时器 timeExport:function(int_day,int_hour,int_minute,int_second,index){ //第index个绑定对象的倒计时每秒执行一次的事件输出函数exportTime(int_day,int_hour,int_minute,int_second,index) //返回值分别是当前倒计时的天时分秒,index为绑定对象的下标(必填); }, returnTimeDown:function($this,index){ //第index个绑定的对象 //当前被绑对象$this //不开启当前绑定元素的倒计时的条件。返回true则不赋予当前$this定时器 }, callback:function($this,index){ //回调函数,第index个绑定对象的倒计时结束时执行的方法 //当前被绑对象$this } }; var Classes={ HadTimeDown:"TimeDownRender" }; var opts = $.extend({},defaluts,options || {}); var time_start=[]; var time_end=[]; var time_distance=[]; var timeflag=true; var flagInterval=true;//只清一次定时器 return this.each(function(index){ if(opts.IsInitInterval&&flagInterval){//切换的时候加定时器之前先清一遍之前的定时器; flagInterval=false; console.log(TimerCountDownArrList); //切换的时候一定要清掉之前存下来的定时器 $.each(TimerCountDownArrList, function(i,value) { window.clearInterval(TimerCountDownArrList[i]); }); } var self=$(this); if(opts.returnTimeDown(self,index)){ self.addClass(Classes.HadTimeDown); return true; } if(self.hasClass(Classes.HadTimeDown)){ return true; } self.addClass(Classes.HadTimeDown); var timeStart=self.attr(opts.timeStartAttr)||self.attr("data-timeStart"); if((timeStart==undefined)&&(opts.timeStartAttr)){ console.log("第"+index+"个绑定对象缺少"+opts.timeStartAttr+"自定义属性!如果是没有倒计时的页面面请忽略"); return; }else if((timeStart==undefined)&&!(opts.timeStartAttr)){ console.log("第"+index+"个绑定对象缺少data-timeStart自定义属性!如果是没有倒计时的页面面请忽略"); return; } var timeEnd=self.attr(opts.timeEndAttr)||self.attr("data-timeEnd"); if((timeEnd==undefined)&&(opts.timeEndAttr)){ console.log("第"+index+"个绑定对象缺少"+opts.timeEndAttr+"自定义属性!如果是没有倒计时的页面面请忽略"); return; }else if((timeEnd==undefined)&&!(opts.timeEndAttr)){ console.log("第"+index+"个绑定对象缺少data-timeEnd自定义属性!如果是没有倒计时的页面面请忽略"); return; } time_start[index]=new Date(timeStart.replace(/[-]/g,"/")).getTime(); if(((time_start==null)||(time_start==0))&&(timeflag)){ console.log("获取服务器时间失败,当前使用系统时间,倒计时间可能不准确!"); time_start = new Date().getTime(); timeflag=false; } time_end[index]=new Date(timeEnd.replace(/[-]/g,"/")).getTime(); time_distance[index] = time_end[index] - time_start[index]; if(isNaN(time_distance[index])){ console.log("第"+index+"个绑定对象的倒计时时间格式有误!"); return; } var timer=[]; if(time_distance[index]<=0){ if(timer[index]){clearInterval(timer[index]);} if(typeof opts.callback=='function'){ opts.callback(self,index); } }else{ timer[index]=setInterval(function(){ var int_day=[]; int_day[index] = Math.floor(time_distance[index]/86400000); var time_distance1 =time_distance[index] - int_day[index] * 86400000; var int_hour=[]; int_hour[index] = Math.floor(time_distance1/3600000) ; var time_distance2 =time_distance1-int_hour[index] * 3600000; var int_minute=[]; int_minute[index] = Math.floor(time_distance2/60000) ; var time_distance3 =time_distance2-int_minute[index] * 60000; var int_second=[]; int_second[index] = Math.floor(time_distance3/1000) ; if(int_day[index] < 10){ int_day[index] = "0" + int_day[index]; } if(int_hour[index] < 10){ int_hour[index] = "0" + int_hour[index]; } if(int_minute[index] < 10){ int_minute[index] = "0" + int_minute[index]; } if(int_second[index] < 10){ int_second[index] = "0" + int_second[index]; } if(time_distance[index]<0){ if(typeof opts.callback=='function'){ opts.callback(self,index); } if(timer[index]){clearInterval(timer[index]);} }else{ if(typeof opts.timeExport=='function'){ opts.timeExport(int_day[index],int_hour[index],int_minute[index],int_second[index],index); } //统一改为小于零才执行回调,不和等于0同时进行; // if(time_distance[index]<0){ // if(typeof opts.callback=='function'){ // opts.callback(self,index); // } // if(timer[index]){clearInterval(timer[index]);} // } time_distance[index]-=1000; } },1000); TimerCountDownArrList.push(timer[index]); } }) } })(jQuery,TimerCountDownArrList)//-------html部分--------//单个元素多个元素都可以
// <p data-timeStart="2017-03-09 15:33:30" data-timeEnd="2017-03-09 15:35:30" class="time-down"></p>
// <p data-timeStart="2017-03-09 15:33:30" data-timeEnd="2017-03-10 15:36:31" class="time-down"></p>
// <p data-timeStart="2017-03-09 15:33:30" data-timeEnd="2017-03-11 15:37:32" class="time-down"></p>
// <p data-timeStart="2017-03-09 15:33:30" data-timeEnd="2017-03-12 15:38:33" class="time-down"></p>
// <p data-timeStart="2017-03-09 15:33:30" data-timeEnd="2017-03-13 15:39:34" class="time-down"></p>
// <p data-timeStart="2017-03-09 15:33:30" data-timeEnd="2017-03-14 15:40:35" class="time-down"></p>
// <p data-timeStart="2017-03-09 15:33:30" data-timeEnd="2017-03-15 15:41:36" class="time-down"></p>
// <p data-timeStart="2017-03-09 15:33:30" data-timeEnd="2017-03-16 15:42:37" class="time-down"></p>
// <p data-timeStart="2017-03-09 15:33:30" data-timeEnd="2017-03-17 15:43:38" class="time-down"></p>
// <p data-timeStart="2017-03-09 15:33:30" data-timeEnd="2017-03-18 15:44:39" class="time-down"></p>
// -------js部分---------//
$("p.time-down").showTimeCountDown({
timeStartAttr:'',//存放开始时间的自定义属性名,绑定对象和这里都要写,不传则默认为data-timeStart
timeEndAttr:'',//存放截止时间的自定义属性名,绑定对象和这里都要写,不传默认为data-timeEnd
timeExport:function(int_day,int_hour,int_minute,int_second,index){
console.log("第"+index+"个倒计时:"+int_day+'|'+int_hour+'|'+int_minute+"|"+int_second)
},//每秒执行一次的事件输出函数exportTime(int_day,int_hour,int_minute,int_second,index)返回值分别是天时分秒(必填);
callback:function(index){
console.log("倒计时"+index+"完毕!");
},//回调函数,倒计时结束时执行的方法
})