我想在倒数计时器停止后打开一个div

Question

我正在用计时器建立一个能力倾向测试。我想在倒数结束时显示超时

的div。并且可以在倒计时结束时显示**精益模态弹出框**。请帮忙！！！。继承人的代码

的Javascript

<script language="JavaScript" type="text/javascript">

function CountDownTimer(duration, granularity) {
  this.duration = duration;
  this.granularity = granularity || 1000;
  this.tickFtns = [];
  this.running = false;
}

CountDownTimer.prototype.start = function() {
  if (this.running) {
    return;
  }
  this.running = true;
  var start = Date.now(),
      that = this,
      diff, obj;

  (function timer() {
    diff = that.duration - (((Date.now() - start) / 1000) | 0);

    if (diff > 0) {
      setTimeout(timer, that.granularity);
    } else {
      diff = 0;
      that.running = false;
    }

    obj = CountDownTimer.parse(diff);
    that.tickFtns.forEach(function(ftn) {
      ftn.call(this, obj.minutes, obj.seconds);
    }, that);
  }());
};

CountDownTimer.prototype.onTick = function(ftn) {
  if (typeof ftn === 'function') {
    this.tickFtns.push(ftn);
  }
  return this;
};

CountDownTimer.prototype.expired = function() {
  return !this.running;
};

CountDownTimer.parse = function(seconds) {
  return {
    'minutes': (seconds / 60) | 0,
    'seconds': (seconds % 60) | 0
  };
};


window.onload = function () {
    var display = document.querySelector('#time'),
        timer = new CountDownTimer(5),
        timeObj = CountDownTimer.parse(5);

    format(timeObj.minutes, timeObj.seconds);

    timer.onTick(format);

    document.querySelector('button').addEventListener('click', function () {
        timer.start();
    });

    function format(minutes, seconds) {
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        display.textContent = minutes + ':' + seconds;
}

if(display.textContent == 0){


            document.querySelector("#div1").style.display="block";





}



};



</script>

HTML

<button>Start Count Down</button>
    <div>Registration closes in <span id="time"></span> minutes!</div>

div显示

<div id="div1" style="display:none;" ><p>Hello</p></div>

1 个答案:

答案 0 :(得分：0)

好的，事情是，你有这段javascript代码：

Date.now()

在底部，您有一个“if”语句。

将if语句移动到“format”函数中，如下所示：

    window.onload = function () {
    var display = document.querySelector('#time'),
        timer = new CountDownTimer(5),
        timeObj = CountDownTimer.parse(5);

    format(timeObj.minutes, timeObj.seconds);

    timer.onTick(format);

    document.querySelector('button').addEventListener('click', function () {
        timer.start();
    });

    function format(minutes, seconds) {
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        display.textContent = minutes + ':' + seconds;
}

if(display.textContent == 0){


            document.querySelector("#div1").style.display="block";





}

您的代码，就目前的方式而言，并未对每个代码执行检查。

此外，您没有检查“0”。值应为“00:00”

当然，您可以移动支票以将div显示给tick事件，但这完全取决于您。

Answer 1

好的，事情是，你有这段javascript代码：

Date.now()

在底部，您有一个“if”语句。

将if语句移动到“format”函数中，如下所示：

    window.onload = function () {
    var display = document.querySelector('#time'),
        timer = new CountDownTimer(5),
        timeObj = CountDownTimer.parse(5);

    format(timeObj.minutes, timeObj.seconds);

    timer.onTick(format);

    document.querySelector('button').addEventListener('click', function () {
        timer.start();
    });

    function format(minutes, seconds) {
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        display.textContent = minutes + ':' + seconds;
}

if(display.textContent == 0){


            document.querySelector("#div1").style.display="block";





}

您的代码，就目前的方式而言，并未对每个代码执行检查。

此外，您没有检查“0”。值应为“00:00”

当然，您可以移动支票以将div显示给tick事件，但这完全取决于您。