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

how to create a javascript countdown which on refreshing continues counting

本文关键字：刷新 继续 倒计时 一个 何创建 创建 javascript      更新时间：2023-09-26

我尝试用javascript和jquery，但不知道如何做到这一点。我不想让计时器再次开始刷新计数。这与拍卖一样，当他倒数3,2，刷新后他不会再次开始，它应该继续倒数上一次结束的地方。对于其他的产物必须从3开始计数。有什么主意吗?

编辑:因为一些用户误解了我在搜索什么。

我的问题是，我不知道如何节省时间，当有人刷新页面继续倒计时。如果有人在21秒刷新网站，他或她有30秒的时间做出选择。刷新站点后，计数器将在21秒后计数，而不会在30秒后再次启动。没有ajax .

尽可能硬编码。如果不可能，那么cookie的变体

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

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

如果它有一个名称(这意味着页面被重新加载)，从cookie中读取计数值并做增量并保存到cookie中。

EDIT:示例，在body load上调用initCount()函数。使用decrementAndSave函数减少计数的值并将其保存到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);
}

这不是完美的，但我设计这个脚本做一个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>

如果您有一个倒计时，那么您必须定义某种结束时间。所以，与其设置一个倒计时，每秒钟减去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);

     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);
相关文章：