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程序设计有所帮助。