如何为未重置的测验存储javascript计时器倒计时答案

【问题标题】：How to store javascript timer countdown for quiz that don't reset如何为未重置的测验存储javascript计时器倒计时
【发布时间】：2019-07-22 15:42:06
【问题描述】：

我需要帮助来存储此计时器倒计时的时间，它运行正常，但是当我按下浏览器的刷新或返回时，计时器将重新启动它，例如 15:00，然后计时器启动示例时间为 9:00，如果我按刷新它会回到15:00。

(function() {

    function display(notifier, str) {
      document.getElementById(notifier).innerHTML = str;
    }

    function toMinuteAndSecond(x) {
      return ~~(x / 60) + ":" + (x % 60 < 10 ? "0" : "") + x % 60;
    }

    function setTimer(remain, actions) {
      var action;
      (function countdown() {
        display("countdown", toMinuteAndSecond(remain));
        if (action = actions[remain]) {
          action();
        }
        if (remain > 0) {
          remain -= 1;
          setTimeout(arguments.callee, 1000);
        }
      })(); // End countdown
    }
    setTimer(900, {
        120: function() {
          display("notifier", "Just 1 minute to go");
        },
        50: function() {
          display("notifier", "50 seconds left");
        },

      }
    }
  );
})();

&lt;span id="notifier"&gt;&lt;/span&gt;

【问题讨论】：

所以在 PHP 的会话中存储开始时间，当页面加载时使用时间来计算剩余时间。
一些合理的代码缩进是个好主意。它可以帮助我们阅读代码，更重要的是，它将帮助 您调试代码 Take a quick look at a coding standard 为您自己谋福利。您可能会被要求在几周/几个月内修改此代码，最后您会感谢我的。
我创建了一个 sn-p 并在控制台中得到一个语法错误。请修复
你好 epascarello 先生，谢谢你在 javascript 上做这个怎么样？

标签： javascript php time timer

【解决方案1】：

在 JS 中 - 注意我放置 localStorage 的位置（它不在 sn-p 中运行）我还修复了发布代码中的错误

(function() {

  function display(notifier, str) {
    document.getElementById(notifier).innerHTML = str;
  }

  function toMinuteAndSecond(x) {
    return ~~(x / 60) + ":" + (x % 60 < 10 ? "0" : "") + x % 60;
  }

  function setTimer(remain, actions) {
    var action;
    (function countdown() {
      // add localStorage.setItem("countdown",remain)
      display("countdown", toMinuteAndSecond(remain));
      if (action = actions[remain]) {
        action();
      }
      if (remain > 0) {
        remain -= 1;
        setTimeout(arguments.callee, 1000);
      }
      else display("countdown","Done");
    })(); // End countdown
  }
  setTimer(30, { // change 30 to +localStorage.getItem("countdown") || 30;
    20: function() {
      display("countdown", "Just 20 seconds to go");
    },
    10: function() {
      display("countdown", "10 seconds left");
    },
  });
})();

&lt;span id="countdown"&gt;&lt;/span&gt;

【讨论】：

它正在工作，谢谢你，我现在唯一的问题是如何让它重新启动，呵呵，非常感谢 mplungjan 先生
如果他们想再次测验，如何重新运行计时器
<input type="button" onclick="localStorage.setItem('countdown',900); location.reload()" />

【解决方案2】：

这里我们应该将变量remain 保存在本地存储中。本地存储中的变量即使在刷新后仍然可用。

附加将按预期为您工作的代码。

(function() {

    function display(notifier, str) {
      document.getElementById(notifier).innerHTML = str;
    }

    function toMinuteAndSecond(x) {
      return ~~(x / 60) + ":" + (x % 60 < 10 ? "0" : "") + x % 60;
    }

    function setTimer(remain, actions) {
      var action;
      localStorage.remain = remain;
      (function countdown() {
        remain =  localStorage.remain;
        display("countdown", toMinuteAndSecond(remain));
        if (action = actions[remain]) {
          action();
        }
        if (remain > 0) {
          localStorage.remain -= 1;
          setTimeout(arguments.callee, 1000);
        }
      })(); // End countdown
    }
    setTimer(900, {
        120: function() {
          display("notifier", "Just 1 minute to go");
        },
        50: function() {
          display("notifier", "50 seconds left");
        },

      }
    }
  );
})();

【讨论】：