Question

我的倒计时时钟在刷新页面时会重置。如果有人可以帮助我，我会很感激吗？

我已经包含了以下脚本。

<script type="text/javascript">
    var ticker = function() {
        $("#ticker").css({
            left: "120%"
        }).animate({
            left: "-420px"
        }, 6000, 'linear', ticker);
    }

    ticker();
</script>

Answer 1

考虑到你需要它＆＃34;运行＆＃34;当用户不在页面中时，我会指出Javascript是一种客户端脚本语言 Javascript代码在本地运行，即它与浏览器相互作用。这使得很难保持＆＃34;如果用户刷新页面，则跟踪事物，除非您已将它们存储在某处。您的解决方案可以采用不同的方法，例如： -

LocalStorage
Cookies
服务器端时钟

您可以使用三种中的任何一种。您可以使用localstorage来保存时钟结束时间，每当用户刷新页面时，从localstorage获取值并相应地启动时钟。类似的方法可以用于cookie。或者，您可以使用某些服务器端代码在页面加载时初始化时钟，服务器将相应地设置启动时钟。但是在评论中可能会有一些滞后。所以我认为最好的方法是，如果你只是想使用javascript，那就是使用cookies / localstorage来保存倒计时到达0时的确切时间。所以每次加载到页面时，都可以获得存储的值，并获得遗失多长时间并相应地设置时钟。

一些编码

创建一个包含到期时间的cookie：

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

获取Cookie：

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

使用样本：

function checkCookie() {
  var clock = getCookie("clock");
  if (clock != "") {
    //You already have the cookie. Make use of it
  } else {
    //You still dont have the cookie, create new clock, and save cookie
    //i.e.
    setCookie("clock", new Date().getTime().toString(), 365);
  }
}

倒计时时钟在刷新时不复位

1 个答案: