jQuery倒计时插件,适用单个倒计时、非绑定、内循环场景使用

时间: 作者:admin 浏览:
(function($){
	//倒计时
	/********************************
	 *
	 * 用法如下,这种倒计时器可操作性比较强,时间全部由外面传进来,适合加在循环中使用,也适用于多个地方输出同一个时间的时候,
	 * //单个时间输出的例子
	var startDate="2017/03/02 18:39:40";
	var lastDate="2017/03/02 18:39:50";
	$.showTimeCountDowner({
		startDate:startDate,
		lastDate:lastDate,
		timeExport:function(int_day,int_hour,int_minute,int_second,index){
			console.log("第"+index+"个倒计时的当前时间是"+"|"+int_day+"|"+int_hour+"|"+int_minute+"|"+int_second);
		},
		callback:function(index){
			console.log("第"+index+"个倒计时完毕!");
			$("selector").eq(index).css("background-color","gray");
		}
	});
	//循环的例子//再循环中多个的时候要将循环的下标传给index
	for(var i=0;i<10;i++){
		var startDate="2017/03/02 18:39:40";
		var lastDate="2017/03/02 18:39:5"+i;
		var index=i;
		$.showTimeCountDowner({
			startDate:startDate,
			lastDate:lastDate,
			timeExport:function(int_day,int_hour,int_minute,int_second,index){
				console.log("第"+index+"个倒计时的当前时间是"+"|"+int_day+"|"+int_hour+"|"+int_minute+"|"+int_second);
			},
			callback:function(index){
				console.log("第"+index+"个倒计时完毕!");
				$("selector").eq(index).css("background-color","gray");
			},
			index:index
		});
	}
	************************************/
	$.extend({
		showTimeCountDowner:function (options){
			var defaluts={
				startDate:'',//服务器当前时间,也可以是开始时间;建议格式:2017/03/02 18:39:50//每刷新一次都不同(注:如果没有则默认使用本机系统时间);
				lastDate:'',//截止时间,倒计时结束的时间,建议格式:2017/03/02 18:39:50//一般都是固定的(必填)
				timeExport:function(int_day,int_hour,int_minute,int_second,index){
					//第index个倒计时每秒执行一次的事件输出函数timeExport(int_day,int_hour,int_minute,int_second,index)
					//返回值分别是当前倒计时的天时分秒,index为倒计时下标(必填);
				},
				callback:function(index){
					//回调函数,第index个倒计时结束时执行的方法
				},
				index:0//index为倒计时的index下标编码,也作为循环的序号,页面有多个倒计时时使用,默认是0。
			};
			var opts = $.extend({},defaluts,options || {});
			var time_start=[];
			time_start[opts.index]=new Date(opts.startDate.replace(/[-]/g,"/")).getTime();
			if((time_start==null)||(time_start==0)){
			  	//console.log("获取服务器时间失败,当前使用系统时间,倒计时间可能不准确!");
			  	time_start = new Date().getTime();
			}
			var time_end=[];
		   		time_end[opts.index]=new Date(opts.lastDate.replace(/[-]/g,"/")).getTime();

		        var time_distance=[];
		   		time_distance[opts.index] = time_end[opts.index] - time_start[opts.index];
		   		if(isNaN(time_distance[opts.index])){
		   			console.log("第"+opts.index+"个倒计时时间格式有误!");
		   			return;
		   		}
		   	var timer=[];
		   	if(time_distance[opts.index]<=0){
		    	if(timer[opts.index]){clearInterval(timer[opts.index]);}
		    	if(typeof opts.callback=='function'){
		    		opts.callback(opts.index);
		    	}
			}
				timer[opts.index]=setInterval(function(){
					    var int_day=[];
					    	int_day[opts.index] = Math.floor(time_distance[opts.index]/86400000);
					    var time_distance1 =time_distance[opts.index] - int_day[opts.index] * 86400000;
					    var int_hour=[];
							int_hour[opts.index] = Math.floor(time_distance1/3600000) ;
					    var time_distance2 =time_distance1-int_hour[opts.index] * 3600000; 
					    var int_minute=[];
					    	int_minute[opts.index] = Math.floor(time_distance2/60000) ;
					    var time_distance3 =time_distance2-int_minute[opts.index] * 60000; 
					    var int_second=[];
					    	int_second[opts.index] = Math.floor(time_distance3/1000) ;
					    if(int_day[opts.index] < 10){ 
					        int_day[opts.index] = "0" + int_day[opts.index];
					    }
					    if(int_hour[opts.index] < 10){ 
					        int_hour[opts.index] = "0" + int_hour[opts.index]; 
					    } 
					    if(int_minute[opts.index] < 10){ 
					        int_minute[opts.index] = "0" + int_minute[opts.index]; 
					    } 
					    if(int_second[opts.index] < 10){
					        int_second[opts.index] = "0" + int_second[opts.index]; 
					    } 
				    	
			    	if(time_distance[opts.index]<0){
			    		if(typeof opts.callback=='function'){
				    		opts.callback(opts.index);
				    	}
				    	if(timer[opts.index]){clearInterval(timer[opts.index]);}
				    }else{
				    	if(typeof opts.timeExport=='function'){
				    		opts.timeExport(int_day[opts.index],int_hour[opts.index],int_minute[opts.index],int_second[opts.index],opts.index);
				    	}
				    	if(time_distance[opts.index]<=0){
				    		if(typeof opts.callback=='function'){
					    		opts.callback(opts.index);
					    	}
				    		if(timer[opts.index]){clearInterval(timer[opts.index]);}
				    	}
				    	time_distance[opts.index]-=1000;
					}
				},1000);
		}
	})

})(jQuery)

微信公众号
微信公众号:
  • 前端全栈之路(微信群)
前端QQ交流群
前端QQ交流群:
  • 794324979
  • 734802480(已满)

更多文章

栏目文章


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