zoukankan      html  css  js  c++  java
  • 倒计时组件

    倒计时组件:

    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('结束了!')
      });

      

  • 相关阅读:
    雨课堂知识点总结(六)
    软件构造雨课堂知识点总结(五)
    软件构造雨课堂知识点总结(四)
    软件构造雨课堂知识点总结(三)
    0-N-0计数的优化写法
    Nginx TP5环境配置
    小程序跳转H5及其他页面
    mysql中varchar类型和datetime类型字段进行比较
    微信小程序开发者工具更新后报很多错误
    php后台解决跨域
  • 原文地址:https://www.cnblogs.com/bsj2016/p/6647227.html
Copyright © 2011-2022 走看看