支付宝赞助帐号:service@kuitao8.com 

jquery 倒记时效果

Created2016-01-18   Views 2555    Author 懒人程序
  1.     <div id="fnTimeCountDown" data-end=""
  2.         <span class="mini">00</span>分 
  3.         <span class="sec">00</span>秒 
  4.         <span class="hm">000</span> 
  5.     </div> 
  6. <script type="text/javascript" src="../../js/jquery-2.1.4.min.js"></script> 
  7. <script type="text/javascript"
  8.     $.extend($.fn,{ 
  9.         fnTimeCountDown:function(d){ 
  10.             this.each(function(){ 
  11.                 var $this = $(this); 
  12.                 var o = { 
  13.                     hm: $this.find(".hm"), 
  14.                     sec: $this.find(".sec"), 
  15.                     mini: $this.find(".mini"), 
  16.                     hour: $this.find(".hour"), 
  17.                     day: $this.find(".day"), 
  18.                     month:$this.find(".month"), 
  19.                     year: $this.find(".year"
  20.                 }; 
  21.                 var f = { 
  22.                     haomiao: function(n){ 
  23.                         if(n < 10)return "00" + n.toString(); 
  24.                         if(n < 100)return "0" + n.toString(); 
  25.                         return n.toString(); 
  26.                     }, 
  27.                     zero: function(n){ 
  28.                         var _n = parseInt(n, 10);//解析字符串,返回整数 
  29.                         if(_n > 0){ 
  30.                             if(_n <= 9){ 
  31.                                 _n = "0" + _n 
  32.                             } 
  33.                             return String(_n); 
  34.                         }else
  35.                             return "00"
  36.                         } 
  37.                     }, 
  38.                     dv: function(){ 
  39.                         //d = d || Date.UTC(2050, 0, 1); //如果未定义时间,则我们设定倒计时日期是2050年1月1日 
  40.                         var _d = $this.data("end") || d; 
  41.                         var now = new Date(), 
  42.                             endDate = new Date(_d); 
  43.                         //现在将来秒差值 
  44.                         //alert(future.getTimezoneOffset()); 
  45.                         var dur = (endDate - now.getTime()) / 1000 , mss = endDate - now.getTime() ,pms = { 
  46.                             hm:"000"
  47.                             sec: "00"
  48.                             mini: "00"
  49.                             hour: "00"
  50.                             day: "00"
  51.                             month: "00"
  52.                             year: "0" 
  53.                         }; 
  54.                         if(mss > 0){ 
  55.                             pms.hm = f.haomiao(mss % 1000); 
  56.                             pms.sec = f.zero(dur % 60); 
  57.                             pms.mini = Math.floor((dur / 60)) > 0? f.zero(Math.floor((dur / 60)) % 60) : "00"
  58.                             pms.hour = Math.floor((dur / 3600)) > 0? f.zero(Math.floor((dur / 3600)) % 24) : "00"
  59.                             pms.day = Math.floor((dur / 86400)) > 0? f.zero(Math.floor((dur / 86400)) % 30) : "00"
  60.                             //月份,以实际平均每月秒数计算 
  61.                             pms.month = Math.floor((dur / 2629744)) > 0? f.zero(Math.floor((dur / 2629744)) % 12) : "00"
  62.                             //年份,按按回归年365天5时48分46秒算 
  63.                             pms.year = Math.floor((dur / 31556926)) > 0? Math.floor((dur / 31556926)) : "0"
  64.                         }else
  65.                             pms.year=pms.month=pms.day=pms.hour=pms.mini=pms.sec="00"
  66.                             pms.hm = "000"
  67.                             //alert('结束了'); 
  68.                             return
  69.                         } 
  70.                         return pms; 
  71.                     }, 
  72.                     ui: function(){ 
  73.                         if(o.hm){ 
  74.                             o.hm.html(f.dv().hm); 
  75.                         } 
  76.                         if(o.sec){ 
  77.                             o.sec.html(f.dv().sec); 
  78.                         } 
  79.                         if(o.mini){ 
  80.                             o.mini.html(f.dv().mini); 
  81.                         } 
  82.                         if(o.hour){ 
  83.                             o.hour.html(f.dv().hour); 
  84.                         } 
  85.                         if(o.day){ 
  86.                             o.day.html(f.dv().day); 
  87.                         } 
  88.                         if(o.month){ 
  89.                             o.month.html(f.dv().month); 
  90.                         } 
  91.                         if(o.year){ 
  92.                             o.year.html(f.dv().year); 
  93.                         } 
  94.                         setTimeout(f.ui, 1); 
  95.                     } 
  96.                 }; 
  97.                 f.ui(); 
  98.             }); 
  99.         } 
  100.     }); 
  101. </script> 
  102. <script type="text/javascript"
  103.  $("#fnTimeCountDown").fnTimeCountDown("2018/07/08 18:45:13"); 
  104. </script> 

 

上一篇: jquery ajax完整操作使用说明
下一篇: jquery统计json的count总数
支持键盘 ← →

邮件订阅

订阅我们的精彩内容