Question

每当我刷新页面时，计时器都会重置。它从一开始就开始。我使用了名为countdown.js的插件

以下是代码：

<script type="text/javascript">
  var now = new Date();
    var countTo = 30 * 24 * 60 * 60 * 1000 + now.valueOf();
    $('.timer').countdown(countTo, function(event) {
        var $this = $(this);
        switch(event.type) {
            case "seconds":
            case "minutes":
            case "hours":
            case "days":
            case "weeks":
            case "daysLeft":
                $this.find('span.'+event.type).html(event.value);
                break;
            case "finished":
                $this.hide();
                break;
        }
    });
</script>


<div class="col-md-8 col-md-offset-3 timer">
    <div class="days-wrapper" style="text-align:center;">
        <span class="days"></span> 
        <p style="margin-left:-80px;"><br><br>DAYS</p>
    </div>
    <div class="hours-wrapper" style="text-align:center;">
        <span class="hours"></span> 
        <p style="margin-left:-80px;"><br><br>HOURS</p>
    </div>
    <div class="minutes-wrapper" style="text-align:center;">
        <span class="minutes"></span> 
        <p style="margin-left:-80px;"><br><br>MIN</p>
    </div>
</div>

Answer 1

每当你重新加载页面javascripts“forgots”时，无论你以前做过什么，你的代码都是从头开始执行的。

可能的解决方案是使用一些持久存储方法，例如localStorage

在您的示例中，您可以执行以下操作：

var previousCountTo = localStorage.getItem('time'); 
var now = new Date(); 
var countTo = previousCountTo?parseInt(previousCountTo, 10):(30 * 24 * 60 * 60 * 1000 + now.valueOf());
localStorage.setItem('time', countTo); // Save the current time.
$('.timer').countdown(countTo, function(event) {
      var $this = $(this);
    console.log(event);
      switch(event.type) {
          case "seconds":
          case "minutes":
          case "hours":
          case "days":
          case "weeks":
          case "daysLeft":
              $this.find('span.'+event.type).html(event.value);
              break;
          case "finished":
              $this.hide();
              localStorage.removeItem('time'); // once finished, remove the timer.
              break;
      }
});

Answer 2

在浏览器中执行JavaScript时，其执行范围仅限于加载页面的生命周期。

卸载页面后，将丢弃所有状态，包括变量和计时器。所以答案是 你不能那样做 。

P.S。：无法在卸载页面后保留变量状态。这不意味着你可以在边缘获得 no 状态。请参阅@ tehsis＆＃39; s excellent answer。

我使用了倒计时器，但它自行重置

2 个答案: