//倒计时
//注意:使用之前必须要在被绑对象上面自定义两个时间属性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+"完毕!");
},//回调函数,倒计时结束时执行的方法
})
