如何创建一个javascript倒计时，刷新时继续计数

Question

我尝试使用 javascript 和 jquery，但不知道该怎么做。我不会让计时器重新开始计数。当他倒计时 3,2 并且刷新他不再开始时，这与拍卖相同，它应该从上次结束的地方继续倒计时。在其他产品上，它必须再次从 3 开始计数。有什么想法吗？

编辑：因为有些用户误解了我要搜索的内容。

我的问题是，当有人刷新页面以继续倒计时时，我不知道如何节省时间。如果有人在 21 秒刷新网站并且他或她有 30 秒的时间做出选择。刷新站点后，计数器将在 21 秒后计数，并且在 30 秒内不再重新开始。 没有 ajax。

尽可能硬编码。 如果不可能，则使用 cookie 变体。

Answer 1

     var interval = 90000; //90 secounds

      function reset() {
        localStorage.endTime = +new Date() + interval;
      }

      if (!localStorage.endTime) {
        reset();
      }
      function millisToMinutesAndSeconds(millis) {
        var minutes = Math.floor(millis / 60000);
        var seconds = ((millis % 60000) / 1000).toFixed(0);
        return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
       }
      setInterval(function () {
        var remaining = localStorage.endTime - new Date();
        if (remaining >= 0) {
          document.getElementById("tooltip").innerText =
            millisToMinutesAndSeconds(remaining);
        } else {
          reset();
        }
      }, 100);

Answer 2

它并不完美，但我设计了这个脚本来进行 30 分钟倒计时，然后在最后几秒钟内更改一些文本。唯一的问题是，当它到达 1:00 时，它从 30:60 开始，我还没有想出如何解决这个问题。这可能无法完美地满足您的需求，但它可能会让您走上正确的道路。

<script>
//add leading zeros
setInterval(function() {
function addZero(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
var x = document.getElementById("timer");
var d = new Date();
var s = (d.getSeconds());
var m = (d.getMinutes());
var a = addZero(30 - m);
var b = addZero(60 - m);
var c = (60 - s);
var z = "<span style='color:red;font-size:50px;'>" + "Break" + "</span>";
var v = "<span style='color:black;font-size:24px;'>" + "Break" + "</span>";
//Decide how much should be subtracted from the time
if (m > 30) {
    y = b;
}
else if (m < 30) {
    y = a;
}
//elements for changing text
if (y < 2 && c < 15) {
    q = z;
}
else {
    q = v;
}

var t = y + (":" + addZero(c) + " Till Station " + (q));
x.innerHTML = t;
}, 250);
</script>


<div align="center" id="timer" style='color:black;font-size:24px;' ></div>

Answer 3

您可以在页面加载时为您的窗口设置一个名称。在设置名称之前，请检查此窗口是否已经有名称。

如果它没有名称，则为窗口设置一个名称并从 0 开始计数，并在每次递增时将计数值保存在 cookie 中。

如果它确实有一个名称（这意味着页面被重新加载），从 cookie 中读取计数值并进行增量并保存到 cookie。

编辑：示例，在体负载时调用 initCount() 函数。使用decrementAndSave函数将count的值递减并保存到cookie中。

var count = 3;// 3 -> 2 -> 1

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function initCount() {
    if (window.name) {
        count = getCookie("count_" + window.name);// to keep separate count cookies for each window    
    } else {
        window.name = "w_" + (new Date().getTime());
        count = 3;
        setCookie("count_" + window.name, count, null);
    }
}

function decrementAndSave() {
    count--;
    // separate cookie for each window or tab
    setCookie("count_" + window.name, count, null);
}

Answer 4

如果您有倒计时，那么您必须定义某种结束时间。因此，与其进行倒计时并每秒减 1，不如尝试以下方法：

var endTime = new Date(2011,11,13,0,0,0); // Midnight of December 13th 2011
var timer = setInterval(function() {
    var now = new Date();
    var timeleft = Math.max(0,Math.floor((endTime.getTime()-now.getTime())/1000));

    var d, h, m, s;
    s = timeleft % 60;
    timeleft = Math.floor(timeleft/60);
    m = timeleft % 60;
    timeleft = Math.floor(timeleft/60);
    h = timeleft % 24;
    timeleft = Math.floor(timeleft/24);
    d = timeleft;

    document.getElementById('counter').innerHTML = "Time left: "+d+" days, "+h+" hours, "+m+" minutes, "+s+" seconds.";

    if( timeleft == 0) clearInterval(timer);
},1000);