【jquery插件】jq_timeGo倒计时插件
【插件功能】
jq_timeGo倒计时插件:用于团购类网站团购项目时间的倒计时。

【原理】
通过使用setInterval函数每秒执行个时间计算函数然后生成相应的HTML添加到页面中。

【演示地址】
www.0773linji/jquery_plugs/jq_timeGo/index.html

【插件参数】
mainSeconds: 剩余时间获取对象样式,默认.remainSeconds
mainTimeShow: 时间显示区域对象,默认.remainTime
message :时间结束后的信息显示对象,默认.message
callBackFunction :回调函数,默认空( 格式function(element,msg){}  element当前对象,msg当前消息对象 )

【代码】
(function($){     
  //插件主要内容     
  $.fn.timeGo = function(options) {       
    var opts = $.extend({},$.fn.timeGo.defaults, options);         
    return this.each(function() {                                                     
      $this = $(this);
      var sysSecond,interValObj;
      var $mainSeconds=$(opts.mainSeconds,$this);
      var $mainTime=$(opts.mainTimeShow,$this);
      var $message=$(ssage,$this);
      var callBackFunction=opts.callBackFunction;
      sysSecond = parseInt($mainSeconds.html());
      interValObj = window.setInterval(setRemainTime, 1000);jquery框架原理
      function setRemainTime()
      {
        if (sysSecond > 0)
        {
          sysSecond = sysSecond - 1;
          var second = Math.floor(sysSecond % 60);            // 计算秒
          var minite = Math.floor((sysSecond/60) % 60);      //计算分
          var hour = Math.floor((sysSecond / 3600) % 24);      //计算小时
          var day = Math.floor((sysSecond / 3600) / 24);        //计算天
          if (second>=0&&second<10) {second="0"+second};
          if (day>=0&&day<10) {day="0"+day};
          if (hour>=0&&hour<10) {hour="0"+hour};
          if (minite>=0&&minite<10) {minite="0"+minite};
          $mainTime.html("<span class='day'>" + day + "</span><span class='hour'>" + hour + "</span><span class='mini'>" + minite + "</span><span class='sec'>" + second + "</span>");
           
          }
          else if (sysSecond == -1){}
          else
          {//剩余时间小于或等于0的时候,就停止间隔函数
            window.clearInterval(interValObj);
            if(typeof callBackFunction == "function")callBackFunction($this,$message);
          }
      }
    });
  };
  //插件主要内容结束
   
  // 插件的defaults     
  $.fn.timeGo.defaults = {
      mainSeconds:".remainSeconds",//剩余时间获取对象
      mainTimeShow:".remainTime",//时间显示区域对象
      message:'.message',//时间结束后的信息显示对象
      callBackFunction:''
  };     
// 闭包结束     
})(jQuery);

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。