刷新时不复位的时钟

Clock that doesn't reset on refresh

本文关键字：时钟 复位 刷新      更新时间：2023-09-26

我试图使这个计数计数在加载或刷新时不重置。有人能帮我一下吗?我听说我可以使用本地存储，但我将需要改变这段代码与PHP和MySQL服务器端。如果你有任何资源可以告诉你PHP的版本，你可以发给我或作为答案发帖吗?

var updateTimer = function() {
    timer = localStorage.getItem('timer') || 0;
    if ( timer === 0 ) {
       $("div#timer").html("Timer is unset");
    } else {
       timer--;
       localStorage.setItem('timer', timer);
      $("div#timer").html(timer);
    }
};
$(function() {
    setInterval(updateTimer, 1000);
    $("#start").click( function() {
        localStorage.setItem('timer', 500);
    });
});
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}
function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');
  function updateClock() {
    var t = getTimeRemaining(endtime);
    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }
  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);

谢谢

如果你想完全避免服务器端编码，你可以使用cookie保存值。

在javascript中，这很容易通过文档完成。cookie = "yourValues, expiryDate"。JQuery也有一些很好的函数来处理cookie。您可能想调整您的脚本来计算加载之间的时间或不运行时钟，但这是可选的。

http://www.w3schools.com/js/js_cookies.asp <-这里有一个关于如何使用它们的简单教程。

对于php，您可以使用cookie's来实现相同的效果。

setcookie($timer);  // Set timer
$_COOKIE['timer'];  // Get timer

你可以开始插入mysql在每次刷新，但使用$_COOKIE显示。Mysql只是为了在刷新页面后跟踪和获得正确的时间。

mysql_query("UPDATE table SET timer = '$timer'");  // Inserting every refresh

当页面加载时要么从form存储cookie中获取要么从mysql表中获取

但是COOKIES将比只使用mysql方法更快(它不会正常工作，因为它需要每秒请求)

相关文章：