javascript - 倒计时器的可能性 - Javascript

Question

是否可以通过按钮的方式激活倒计时器，并在刷新网页时继续运行？我试图实现一个倒计时器，当单击按钮时会激活该计时器，但刷新网页时，计时器会继续正常运行，但不会显示在网页中。因此，当用户再次按下按钮时，计时器将再次重新启动，包括上次停止的时间。有人可以解释一下吗？我发布的内容多得数不过来，但没有人提供帮助。

编辑；使用此代码，计时器运行完美，但刷新页面时不会更新到 span 元素，按钮在计时器用完时不会重新启动计时器，这非常烦人!此外，刷新页面时该按钮不会保持禁用状态。

https://jsfiddle.net/xLmeagLo/

var button = document.querySelector("#coinbtn1");
var label = document.querySelector("#countdown1");
var timer;
var countdown = localStorage.getItem("countdown") || 60;

button.addEventListener("click", function(e) {
  var uid = firebase.auth().currentUser.uid;
  var coinRef = firebase.database().ref().child('users_coins').child(uid).child('coins');
  var counter = 50;
  coinRef.transaction(function(counter) {
    return (counter || 0) + 50;
  });

  if (!timer) {
    countdown = 10;
    timer = setInterval(function() {
      document.getElementById('coinbtn1').disabled = true;
      countdown--;
      label.innerText = countdown + "s";
      localStorage.setItem("countdown", countdown);
      if (countdown <= 0) {
        clearInterval(timer);
        document.getElementById('coinbtn1').disabled = false;
      }
    }, 1000);
  }
});

<div class="mdl-card__actions mdl-card--border">
  <div>Timer : <span id="countdown1">05:00</span></div>
  <div class="mdl-grid">
    <div class="mdl-layout-spacer"></div>
    <button id="coinbtn1" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">50 coins</button>
    <div class="mdl-layout-spacer"></div>
  </div>
</div>

Answer 1

您可能可以将该行为附加到 new Date() 和 localStorage 内的变量。类似于 isTimerActive = true，initialTime =(每当您单击按钮时)。只需检查窗口加载时的更新值(检查 isTimerActive，如果是，则根据initialTime + new Date() 以您需要的任何单位更新计数器)。

希望这是有道理的