倒计时插件（二） 

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>倒计时插件</title>

</head>
<body>
 <div class="donwTime">5</div>
<script src="../js/jquery-2.1.4.min.js"></script>
<script>
 ; (function ($, win) {
    $.fn.jcountdown = function(opt){
      var _this = this;   // this 执行Dom标签，调用属性
      var defaults = {
        initTime: 10   // 默认值
      };
      var options = $.extend({}, defaults, opt);  // 整合在一个对象中
      var _time = setInterval(function(){
        if(options.initTime > 0){
          options.initTime = -- options.initTime;
          _this.text(options.initTime);
        }else{
          clearInterval(_time);
          options.timeEnd();  // 结束回调
        }
      },1000);
      return _this; // jquery 串连操作
    }
  })(jQuery, window);

 
 // 跟上边原来一样
  ;(function($, win, undefined){
     var downTime = function(ele, opts){
       this.$element = ele;
       this.defaults = {
         initTime: 3,
         timeEnd: function(){}
       };
       this.options = $.extend({}, this.defaults, opts);
     };

    downTime.prototype = {
      timeInit: function(){
        var _self = this;
        return this.$element.each(function(){
          var _time = setInterval(function(){
            if(_self.options.initTime > 0){
              _self.options.initTime = -- _self.options.initTime;
              _self.$element.text(_self.options.initTime);
            }else{
              clearInterval(_time);
              _self.options.timeEnd();
            }
          },1000);
        })
      }
    };
    $.fn.ttime = function(opts){
      var  t  = new downTime(this,opts);
      return  t.timeInit();
    }

  })(jQuery, window);

  $(function(){

     $('.donwTime').ttime({
       initTime: 8,
       timeEnd: function(){
         alert("end")
       }
     });
  });
</script>
</body>
</html>

 

posted on 2017-10-11 14:47  Mc525  阅读(386)  评论(0)    收藏  举报

导航