jQuery基于擴(kuò)展實(shí)現(xiàn)的倒計(jì)時效果

更新時間：2016年05月14日 11:12:16 作者：懶人

這篇文章主要介紹了jQuery基于擴(kuò)展實(shí)現(xiàn)的倒計(jì)時效果,涉及jQuery擴(kuò)展的使用與時間操作的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery基于擴(kuò)展實(shí)現(xiàn)的倒計(jì)時效果。分享給大家供大家參考，具體如下：

<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);//解析字符串,返回整數(shù)
      if(_n > 0){
       if(_n <= 9){
        _n = "0" + _n
       }
       return String(_n);
      }else{
       return "00";
      }
     },
     dv: function(){
      //d = d || Date.UTC(2050, 0, 1); //如果未定義時間，則我們設(shè)定倒計(jì)時日期是2050年1月1日
      var _d = $this.data("end") || d;
      var now = new Date(),
       endDate = new Date(_d);
      //現(xiàn)在將來秒差值
      //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";
       //月份，以實(shí)際平均每月秒數(shù)計(jì)算
       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('結(jié)束了');
       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>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery日期與時間操作技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: