Question

尝试制作一个基于计时器的简单弹出窗口。一旦计时器达到10秒弹出将是可见的。点击“确定”后，计时器应暂停或停止。弹出按钮，定时器应从0重启。请帮忙

var span = document.querySelector("#time");
countDown(0);

function countDown(counter) {
  var interval = setInterval(function() {
    var minutes = ((counter / 60) | 0) + "";
    var seconds = (counter % 60) + "";
    var format = "" +
      new Array(3 - minutes.length).join("0") + minutes + ':' + new Array(3 - seconds.length).join("0") + seconds;
    span.innerHTML = format;
    counter++;

    if (seconds == 10) {
      // $("#timeModal").modal(); BS model box open
      // countDown(0);
      document.getElementById("popup").style.visibility = "visible";
    }
  }, 1e3)
}

function timerReset() {
  countDown(0);
  alert("ok");
  document.getElementById("popup").style.visibility = "hidden";
}

Answer 1

当您达到clearInterval条件

时，请

使用seconds == 10

我认为这就是你要找的东西：

#popup {
  width:200px; 
height:200px;
border:solid 1px red; 
visibility:hidden;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<div id="time"></div>
<div id="popup">
  <button id="ok" onclick="timerReset()">
Ok
</button>
</div>

<script>
  var span = document.querySelector("#time");
  countDown(0);

  function countDown(counter) {

    var interval = setInterval(function() {
      var minutes = ((counter / 60) | 0) + "";
      var seconds = (counter % 60) + "";
      var format = "" +
        new Array(3 - minutes.length).join("0") + minutes +
        ':' +
        new Array(3 - seconds.length).join("0") + seconds;

      span.innerHTML = format;
      counter++;
      if (seconds == 10) {
        clearInterval(interval);
        // $("#timeModal").modal(); BS model box open
        // countDown(0);
        document.getElementById("popup").style.visibility = "visible";
      }
    }, 1e3)
  }

  function timerReset() {
    countDown(0);
    alert("ok");
    document.getElementById("popup").style.visibility = "hidden";
  }
</script>

基于JavaScript Timer的弹出窗口

1 个答案: