jQuery基于扩展实现的倒计时效果
更新时间:2016年05月14日 11:12:16 作者:懒人
这篇文章主要介绍了jQuery基于扩展实现的倒计时效果,涉及jQuery扩展的使用与时间操作的相关技巧,需要的朋友可以参考下
本文实例讲述了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插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
这篇文章主要介绍了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法,可实现图片拖拽变换的功能,需要的朋友可以参考下2015-08-08jQuery实现提交表单时不提交隐藏div中input的方法
这篇文章主要介绍了jQuery实现提交表单时不提交隐藏div中input的方法,结合实例形式分析了通过设置input的disabled属性实现隐藏input提交的操作技巧,需要的朋友可以参考下2019-10-10jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
这篇文章主要介绍了jQuery简单实现的HTML页面文本框模糊匹配查询功能,涉及jQuery事件响应模拟列表框的下拉数据展示与隐藏,以及元素遍历、匹配等相关操作技巧,需要的朋友可以参考下2018-05-05jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
我将上一章中了插件做了个小小的升级,实现了自动运行效果,完整代码大家见demo2012-08-08
最新评论