页面刷新时不重新启动的倒数计时器

Question

嗯，基本上就是这样。我正在为我的商店设置促销代码，我想为该促销设置一个计时器，以便人们觉得有必要在促销结束前购买。 我有代码，它已经可以正常工作了，但问题是它会在页面刷新时重新启动，我已经查看了其他答案和东西，但我无法弄清楚如何将 cookie 的东西放在我的代码中，因为这就是所有页面所说的。

谢谢！

我的代码是

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

....

我的网站是：http://sevenpartes.com/

Answer 1

非服务器选项是将计时器开始时间保存在本地存储中，然后在每次加载页面时检查本地存储中的活动计时器。您将在计时器过期时清除本地存储。

这种方法的一个缺点是理论上它是可破解的 - 有人可以编辑局部变量。你可以以某种方式对它进行编码，但对源代码的检查会揭示如何破解它。

Answer 2

将截止日期保存到 cookie。如何使用 javascript 读取和写入 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 + ";path=/";
}
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 "";
}

可以按如下方式使用

$(window).load(function(){
var deadline = new Date( getCookie('deadline') );
// If the deadline is NaN, it has not been set.
if( isNaN(deadline.getTime()) )
{
// Set the deadline to one day from now (86400000ms)
deadline = new Date( Date.now() + 86400000 );
setCookie('deadline', deadline.toUTCString());
}
// The deadline is expired
if( deadline.getTime() < Date.now() ) 
{
// Handle this / set deadline to a new time
}
// Set the countdown timer on the page
myCountDownTimer.setDeadline( deadline );
}

Answer 3

只是一个免责声明，您绝对需要一个服务器端解决方案来防止任何人绕过您的促销时间限制。这也是使这里的代码可靠的唯一方法，但话虽如此，这是我对您的问题的回答。

您可以通过将代码的倒数第二行替换为以下代码来静态设置促销的结束时间。请务必更改数字以与促销的结束日期保持一致。

//The parameters to the below function are year, month minus 1, and day
var deadline = new Date(2018, 6, 1); //This is actually July 1st

如果您希望超时仅在他们首次访问时开始，请参阅有关使用 cookie 的其他答案。

一旦开始使用服务器端语言(如 PHP)，您就可以动态生成进入 Date 对象的这 3 个数字，以从您设置的任何数据库中设置其值。如果您的客户从您的网站购买，那么您还需要在服务器端检查促销是否结束。因为，只在客户端检查很容易绕过。