码迷,mamicode.com
首页 > 其他好文 > 详细

倒计时组件

时间:2017-03-30 19:35:47      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:text   box   html   prot   倒计时   function   out   length   ack   

倒计时组件:

function Countdown(leavetime) {
        this._init(leavetime);
    }

  Countdown.prototype = {
      _init : function (leavetime) {
          this.timer = null;
          this.leavetime = leavetime || 0;
          this.clock = {};
          this.clock.leavetimeSec = Math.floor(this.leavetime / 1000);
      },
      _format : function () {
          this.clock.sec = this.clock.leavetimeSec % 3600 % 60;
          this.clock.min = Math.floor(this.clock.leavetimeSec % 3600 / 60);
          this.clock.hours = Math.floor(this.clock.leavetimeSec / 3600);
          this.clock.secStr = String(this.clock.sec).length == 1 ? (‘0‘ + this.clock.sec) : String(this.clock.sec);
          this.clock.minStr = String(this.clock.min).length == 1 ? (‘0‘ + this.clock.min) : String(this.clock.min);
          this.clock.hourStr = String(this.clock.hours).length == 1 ? (‘0‘ + this.clock.hours) : String(this.clock.hours);
      },
      run : function (doFn, endFn) {
          var that = this;
          this._format();
          doFn(this.clock);
          if (this.clock.leavetimeSec == 0) {
              clearTimeout(this.timer);
              endFn(this.clock);
              return this;
          }
          this.clock.leavetimeSec --;
          this.timer = setTimeout(function () {
              that.run(doFn, endFn);
          }, 1000)
      }
  };

 

使用:(为说明使用,运用了jquery获取dom对象)

html: <div id="box"></div>

var Countdown = new Countdown(30000000); // 实例化倒计时

// 运行倒计时
Countdown.run(function (clock) { // clock 是个对象 挂载着小时 分钟 秒钟
    $(‘#box‘).text(clock.hourStr + ‘:‘ + clock.minStr + ‘:‘ + clock.secStr);
  }, function () { // 这里写倒计时到点的callback
    alert(‘结束了!‘)
  });

 

  

倒计时组件

标签:text   box   html   prot   倒计时   function   out   length   ack   

原文地址:http://www.cnblogs.com/bsj2016/p/6647227.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!