带模式窗口的jQuery计数器

Question

在循环中经过一些延迟后，我正在使用带有模式窗口的jQuery计数器。它工作得很好，但问题是当页面重新加载时，计数器从10到0正确启动，比如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开始，因为您已将其定义为10。这只会在页面加载时发生一次。之后，起始值将为零(从上次下载计时器开始)。

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

添加以下行(不要从downloadtimer-function中删除它)

    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

你应该把timeleft--；放在后面。下面这行

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();
});

working fiddle https://jsfiddle.net/DTcHh/95494/