javascript 循环倒计时

Question

我有一个关于倒数计时器的问题。 我有以下代码显示视觉倒计时。我的问题是每次我刷新页面时它都会重置，它的客户端。有没有办法让下面的服务器端达到零时重新启动？

<script>
    var interval;
    var minutes = 1;
    var seconds = 5;
    window.onload = function() {
        countdown('countdown');
    }

    function countdown(element) {
        interval = setInterval(function() {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    el.innerHTML = "countdown's over!";                    
                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
            seconds--;
        }, 1000);
    }
    </script>

<div id='countdown'></div>

上面的代码可以在这里找到：
Javascript Countdown

Answer 1

您确定计数器必须在服务器端吗？如果您只是想让倒计时在浏览器刷新期间持续存在，您可以使用 cookie

// Setting cookie after every second, using the jQuery cookie plugin http://plugins.jquery.com/project/cookie
$.cookie("minutes", current_minutes_left);
$.cookie("seconds", current_seconds_left);

// Retrieve cookie later
$.cookie("minutes");
$.cookie("seconds");
// do something with the cookies

应该这样做。

Answer 2

刚刚设置

var minutes = 1;
var seconds = 5;

由服务器脚本根据倒计时的结束时间。

示例：

1. 在服务器端（PHP 会话）存储倒计时结束时刻的日期时间
2. 根据存储的有关客户端偏移量（不同时区）的值计算倒计时时间
3. 将计算值作为输出 HTML 中的 JavaScript 值写入

重新加载时，只需根据存储的值重新计算倒计时时间。

就是这样！