Question

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

修改； 使用此代码，计时器可以完美运行，但是在刷新页面时不会更新到span元素，当计时器用尽时，按钮不会重新启动计时器，这令人讨厌！另外，刷新页面时，按钮不会保持禁用状态。

JS

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

HTML

<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>

https://jsfiddle.net/xLmeagLo/

Answer 1

您可能会将该行为附加到新的Date（）和localStorage内部的变量。 isTimerActive = true，initialTime =（每次单击按钮时）的种类。然后只需检查更新窗口加载时的值即可（如果需要，请检查isTimerActive，然后根据您需要的单位，根据initialTime + new Date（）更新计数器）。

希望有道理

Answer 2

JavaScript变量不能在页面（重新）加载之间保留，因此您需要某种形式的保留。有多种方法可以解决此问题，具体取决于您的需求：

存储在URL中-您可以使页面将倒数目标作为一个片段（例如page.html#20181111-035625，其中时间戳目标可以是您的结束时间，以秒为单位，以毫秒为单位）或作为日期时间表示形式（请注意:和空格）。当用户按下按钮时，可以将它们重定向到添加了正确片段的页面。

优点：可以将目标时间作为URL进行共享。易于实现。甚至在古老的浏览器中也受支持，无法通过清除本地存储/关闭浏览器来清除。

缺点：如果用户（重新）打开相同的URL，则用户只会看到相同的倒计时，因此关闭窗口并重新导航至基本页面会丢失倒计时。通过为用户提供错误的网址可以误导用户使用错误的倒计时

SessionStorage或LocalStorage -前者一直存在，直到关闭浏览器为止，后者将持续到浏览器关闭为止。

优点：不与URL绑定。广泛支持所有相关内容（请注意真正的旧浏览器，例如IE <8）

缺点：：绑定到特定的浏览器/设备/来源。如果您的用户在另一台设备上打开该页面，则他们将不会看到其计时器。

服务器端存储-将计时器目标/状态存储在某种形式的持久后端（数据库等）上

专家：在设备/浏览器/会话之间持续存在。就用户不被假计时器误导而言，此方法最可靠。

缺点：最复杂，后端需要某种形式的会话/帐户功能

Answer 3

网页是无状态的。每次加载网页时，就好像这是浏览器第一次看到该网页一样。因此，当您重新加载页面时，浏览器将没有上一次倒计时的记忆，并且所有变量都将重新初始化。

要使倒计时状态化，您需要在两次调用之间存储其值。一种简单的方法是使用local storage，这是每个网页从浏览器获取的键值存储。您可以使用以下方法在其中添加值：

localStorage.setItem('countdown', countdown);

然后通过以下方式重新加载：

var countdown = localStorage.getItem('countdown');

一个简单的倒数计时器示例：

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

button.addEventListener("click", function(e) {
  if (!timer) {
    countdown = 10;
    timer = setInterval(function() {
      countdown--;
      label.innerText = countdown+"s";
      localStorage.setItem("countdown", countdown);
      if (countdown <= 0) {
        clearInterval(timer);
        alert("All done");
      }
    }, 1000);
  }
});

<span>60s</span>
<button>Start countdown</button>

倒数计时器的可能性-Javascript

3 个答案: