倒计时重置

Question

我的网站上有一个倒计时时钟，但如果您清除浏览器历史记录，它会重置。有没有办法阻止这种情况发生。我在网站上找到了可以从中下载的代码。清除浏览器历史记录时，我没想到会重置它。可以修改此代码，还是为我找到另一个代码更好。

由于

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);

#clockdiv {
color: #ffffff;
display: inline-block;
font-size: 14px;
font-weight: 100;
text-align: center;
}

#clockdiv > div {
background: #0294cb;
border-radius: 3px;
display: inline-block;
padding: 8px;
}

#clockdiv div > span {
background: #42baff;
border-radius: 3px;
display: inline-block;
padding: 15px;
}

.smalltext {
font-size: 14px;
padding-top: 5px;
}

<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>

Answer 1

您可以将初始截止时间保存在localStorage中（但这会在删除历史记录时清除）然后使用它而不是在重新加载时重新设置它，如果您希望计时器在清除数据时不重置，则必须维持服务器端状态。

Answer 2

您可以将这段代码添加到脚本的底部。您不必每次都初始化新的截止日期，而是检查截止日期是否已经初始化并存储在localStorage中，如果是，则从中获取截止日期。如果不是，请像在原始代码中一样创建新的截止日期，并将其存储在localStorage中。

请注意，如果要存储并稍后从JSON.stringify检索对象，则需要使用JSON.parse和localStorage方法，因为它只能保存字符串和对象的默认字符串表示形式不是很有用。

此代码不会重置页面重新加载的倒计时，您也可以清除历史记录，但无法清除localStorage（缓存文件和Cookie）以使其正常工作。

if (!localStorage.getItem('deadline')) {
  const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
  localStorage.setItem('deadline', JSON.stringify(deadline));
  initializeClock('clockdiv', deadline);
} else {
  const deadline = JSON.parse(localStorage.getItem('deadline'));
  initializeClock('clockdiv', deadline);
}

请参阅代码段以获取完整代码，但请注意，此处无效，因为无法在SO上访问localStorage。您需要复制并粘贴它并在浏览器中进行测试。

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);
}


if (!localStorage.getItem('deadline')) {
  const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
  localStorage.setItem('deadline', JSON.stringify(deadline));
  initializeClock('clockdiv', deadline);
} else {
  const deadline = JSON.parse(localStorage.getItem('deadline'));
  initializeClock('clockdiv', deadline);
}

#clockdiv {
  color: #ffffff;
  display: inline-block;
  font-size: 14px;
  font-weight: 100;
  text-align: center;
}

#clockdiv > div {
  background: #0294cb;
  border-radius: 3px;
  display: inline-block;
  padding: 8px;
}

#clockdiv div > span {
  background: #42baff;
  border-radius: 3px;
  display: inline-block;
  padding: 15px;
}

.smalltext {
  font-size: 14px;
  padding-top: 5px;
}

<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>