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)