您的位置：首页 > Web前端 > JQuery

jQuery基于扩展实现的倒计时效果

2016-05-14 11:12 951 查看

本文实例讲述了jQuery基于扩展实现的倒计时效果。分享给大家供大家参考，具体如下：

<div id="fnTimeCountDown" data-end="">
<span class="mini">00</span>分
<span class="sec">00</span>秒
<span class="hm">000</span>
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$.extend($.fn,{
fnTimeCountDown:function(d){
this.each(function(){
var $this = $(this);
var o = {
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")
};
var f = {
haomiao: function(n){
if(n < 10)return "00" + n.toString();
if(n < 100)return "0" + n.toString();
return n.toString();
},
zero: function(n){
var _n = parseInt(n, 10);//解析字符串,返回整数
if(_n > 0){
if(_n <= 9){
_n = "0" + _n
}
return String(_n);
}else{
return "00";
}
},
dv: function(){
//d = d || Date.UTC(2050, 0, 1); //如果未定义时间，则我们设定倒计时日期是2050年1月1日
var _d = $this.data("end") || d;
var now = new Date(),
endDate = new Date(_d);
//现在将来秒差值
//alert(future.getTimezoneOffset());
var dur = (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;
}
return pms;
},
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>
<script type="text/javascript">
$("#fnTimeCountDown").fnTimeCountDown("2018/07/08 18:45:13");
</script>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery日期与时间操作技巧总结》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery 倒计时

相关文章推荐

新的分享

章节导航