首页 > 编程 > JavaScript > 正文

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

2019-11-20 10:03:51
字体:
来源:转载
供稿:网友

本文实例讲述了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程序设计有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表