jQuery倒计时插件,适用于绑定对象集,支持多个倒计时使用

时间: 作者:admin 浏览:
        //倒计时
	//注意:使用之前必须要在被绑对象上面自定义两个时间属性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+"完毕!");
		},//回调函数,倒计时结束时执行的方法
		
	})
微信公众号
微信公众号:
  • 前端全栈之路(微信群)
前端QQ交流群
前端QQ交流群:
  • 794324979
  • 734802480(已满)

更多文章

栏目文章


Copyright © 2014-2023 seozhijia.net 版权所有-粤ICP备13087626号-4