Question

在循环中延迟了一段时间后，我将jQuery计数器与模式窗口一起使用。它工作正常，但是当页面重新加载计数器时，该问题会从10正确开始，如10、9、8 ... 0，这正是我所需要的。

当不重新加载页面时，将加载模式窗口，但计数器以0、9、8、7 ... 0开始。我希望每次加载模式窗口时，计数器都从10开始。

$(window).load(function() {
  function function_name() {
    setTimeout(function() {
      $('#myCounter').modal('show');
      var timeleft = 10;
      var downloadTimer = setInterval(function() {
        timeleft--;
        document.getElementById("countdowntimer").textContent = timeleft;
        if (timeleft <= 0)
          clearInterval(downloadTimer);
      }, 1000);
      function_name(); // call function
    }, 10000);
  }
  function_name();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="myCounter" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <section id="content" class="middel-align form">
          <div class="container">
            <div class="col-lg-12 col-sm-12 col-xs-12 text-center">
              <h3> The download will begin in <span id="countdowntimer">10 </span> Seconds</h3>
            </div>
            <div class="col-lg-6 col-lg-offset-3 col-sm-offset-3 col-sm-6 col-xs-12">
              <div class="field text-center">
                <a id="BtnOne" class="button" type="button" class="close" data-dismiss="modal" aria-label="Close">Continue Browser</a>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>

我希望你们能理解我的问题。

谢谢。

Answer 1

在加载页面时，更新值的范围从10开始，因为您将其定义为。页面加载后，只会发生一次。之后，起始值将为零（从最后一个下载计时器开始）。

要解决此问题，请在执行downloadTimer之前将范围内的初始值重置为10。

添加以下行（请勿将其从downloadtimer功能中删除）

    document.getElementById("countdowntimer").textContent = timeLeft;

这里

var timeleft = 10;
document.getElementById("countdowntimer").textContent = timeLeft;
var downloadTimer = setInterval(function() { 
    timeleft--;
    document.getElementById("countdowntimer").textContent = timeleft;
    if (timeleft <= 0) ...

Answer 2

您应该将剩余时间-之后。下一行

document.getElementById("countdowntimer").textContent = timeleft;
timeleft--;

Answer 3

最后这是您解决的代码

$(window).on('load',function() {
    function function_name() {
      setTimeout(function() {
        $('#myCounter').modal('show');
        var timeleft = 10;
        var downloadTimer = setInterval(function() {
        timeleft--;

        document.getElementById("countdowntimer").textContent = timeleft;
        if (timeleft <= 0){
           timeleft = 11;
        }
     }, 1000);
  }, 10000);
}
function_name();
});

工作小提琴https://jsfiddle.net/DTcHh/95494/

Answer 4

尝试一下：

var timeleft = 10;
var downloadTimer;

$('#myCounter').on('shown.bs.modal', function () {
    document.getElementById("countdowntimer").textContent = timeleft;
    $('#myCounter').trigger('focus');

    downloadTimer = setInterval(function() {
        timeleft--;
        document.getElementById("countdowntimer").textContent = timeleft;
        if (timeleft <= 0)    
        clearInterval(downloadTimer);
  }, 1000);

}).on('hide.bs.modal', function(){

    clearInterval(downloadTimer);
    timeleft = 10;

})

带有模态窗口的jQuery计数器

4 个答案: