jQuery基于扩展实现的倒计时效果
本文实例讲述了jQuery基于扩展实现的倒计时效果。分享给大家供大家参考，具体如下：
<divid="fnTimeCountDown"data-end="">
<spanclass="mini">00</span>分
<spanclass="sec">00</span>秒
<spanclass="hm">000</span>
</div>
<scripttype="text/javascript"src="jquery-2.1.4.min.js"></script>
<scripttype="text/javascript">
$.extend($.fn,{
fnTimeCountDown:function(d){
this.each(function(){
var$this=$(this);
varo={
hm:$this.find(".hm"),
sec:$this.find(".sec"),
mini:$this.find(".mini"),
hour:$this.find(".hour"),
day:$this.find(".day"),
month:$this.find(".month"),
year:$this.find(".year")
};
varf={
haomiao:function(n){
if(n<10)return"00"+n.toString();
if(n<100)return"0"+n.toString();
returnn.toString();
},
zero:function(n){
var_n=parseInt(n,10);//解析字符串,返回整数
if(_n>0){
if(_n<=9){
_n="0"+_n
}
returnString(_n);
}else{
return"00";
}
},
dv:function(){
//d=d||Date.UTC(2050,0,1);//如果未定义时间，则我们设定倒计时日期是2050年1月1日
var_d=$this.data("end")||d;
varnow=newDate(),
endDate=newDate(_d);
//现在将来秒差值
//alert(future.getTimezoneOffset());
vardur=(endDate-now.getTime())/1000,mss=endDate-now.getTime(),pms={
hm:"000",
sec:"00",
mini:"00",
hour:"00",
day:"00",
month:"00",
year:"0"
};
if(mss>0){
pms.hm=f.haomiao(mss%1000);
pms.sec=f.zero(dur%60);
pms.mini=Math.floor((dur/60))>0?f.zero(Math.floor((dur/60))%60):"00";
pms.hour=Math.floor((dur/3600))>0?f.zero(Math.floor((dur/3600))%24):"00";
pms.day=Math.floor((dur/86400))>0?f.zero(Math.floor((dur/86400))%30):"00";
//月份，以实际平均每月秒数计算
pms.month=Math.floor((dur/2629744))>0?f.zero(Math.floor((dur/2629744))%12):"00";
//年份，按按回归年365天5时48分46秒算
pms.year=Math.floor((dur/31556926))>0?Math.floor((dur/31556926)):"0";
}else{
pms.year=pms.month=pms.day=pms.hour=pms.mini=pms.sec="00";
pms.hm="000";
//alert('结束了');
return;
}
returnpms;
},
ui:function(){
if(o.hm){
o.hm.html(f.dv().hm);
}
if(o.sec){
o.sec.html(f.dv().sec);
}
if(o.mini){
o.mini.html(f.dv().mini);
}
if(o.hour){
o.hour.html(f.dv().hour);
}
if(o.day){
o.day.html(f.dv().day);
}
if(o.month){
o.month.html(f.dv().month);
}
if(o.year){
o.year.html(f.dv().year);
}
setTimeout(f.ui,1);
}
};
f.ui();
});
}
});
</script>
<scripttype="text/javascript">
$("#fnTimeCountDown").fnTimeCountDown("2018/07/0818:45:13");
</script>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery日期与时间操作技巧总结》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。