Question

我有PHP页面，在那里我添加倒计时30分钟。当我刷新页面或执行“插入”查询并重定向回该页面时，计时器会重置。

我希望计时器保持不变，并在页面刷新时继续计数而不会中断。

我的代码如下：

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

window.onload = function() {
  var fiveMinutes = 60 * 30,
    display = document.querySelector('#time');
  startTimer(fiveMinutes, display);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timer">
  <div>Section</div>
  <div class="time">
    <strong>Time left: <span id="time">30:00</span></strong>
  </div>
</div>

赞赏任何帮助..

Answer 1

使用html5本地存储更新计时器值，并在发生页面加载时从本地存储读取计时器值。我猜没别的办法。

Answer 2

每当你的PHP页面加载时，javascript都会加载它。所以

window.onload = function () {
    var fiveMinutes = 60 * 30,
    display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

调用

，计时器从5分钟开始。

一种解决方案是在window.onload中执行Ajax请求并获取剩余时间。

另一个解决方案是通过PHP设置fiveMinutes变量（显然应该更适当地重命名），如果javascript代码在PHP文件中，比如

<script>
...
var timeLeft = <?php echo $timeLeft ?>;
...
</script>

第一种解决方案是标准的方法，第二种解决方案是最简单的方法。

Answer 3

正如其他人所指出的那样，您可以使用本地存储（如果目标客户端支持此功能see here）

<script>
        function startTimer(duration, display) {
            var timer = duration, minutes, seconds;

          setInterval(function () {
                minutes = parseInt(timer / 60, 10)
                seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                display.textContent = minutes + ":" + seconds;
                timer = --timer;
                if (timer >= 0) {
                    localStorage.setItem('time', timer);
                    //timer = duration;
                }
            }, 1000);
        }

        window.onload = function () {
            var countDown = 60 * 30;
            var oldVal = localStorage.getItem('time');
            if (oldVal && oldVal > 0) {
                countDown = oldVal;
            }
            var display = document.querySelector('#time');
            startTimer(countDown, display);
        };
</script>

编辑：当然，不要忘记检查存储的值是否低于零。

Answer 4

正如已经指出的那样，您可以使用localStorage存储当前时间。为此，您可以在每个间隔时间内保存minutes和seconds：

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        localStorage.setItem("minutes", minutes); // <--
        localStorage.setItem("seconds", seconds); // <--

在加载功能中，您可以从中读取并适当设置起始值。重要的是要注意，值总是存储为字符串，因此，有必要在传递数据之前将它们解析回数字：

window.onload = function () {
    var timeLeft = 60 * 30,
        display = document.querySelector('#time');

    var minutes = localStorage.getItem("minutes"); //read minutes
    var seconds = localStorage.getItem("seconds"); //read seconds

    if (minutes && seconds){
        timeLeft = Number(minutes) * 60 + Number(seconds); //set time with val from storage
    }

    startTimer(timeLeft, display);
};

我将fiveMinutes的名称更改为timeLeft以更好地反映其所包含的内容，并使用Number()将这两个值解析为数字。

同样重要的是，虽然这确实在刷新后保留了价值，但它并没有计算＆＃34;计算＆＃34;页面关闭的时间。所以记住这一点。

Answer 5

尝试使用Ajax进行通信，并使用javascript修改html页面，而不是刷新整个页面。

每当页面刷新时，Java脚本倒计时器都会重置

5 个答案: