java脚本倒数计时器在页面刷新时得到重置

我正在尝试为我的网站实现倒计时，但它在每一页刷新时都会重置，我不知道如何解决这个问题，你们能帮助我吗？（i used this）。 ..java脚本倒数计时器在页面刷新时得到重置

var timer; 
 
var compareDate = new Date(); 
 
compareDate.setDate(compareDate.getDate() + 16); //incresed by to date + (16 days) 
 

 
timer = setInterval(function() { 
 
    timeBetweenDates(compareDate); 
 
}, 1000); 
 

 
function timeBetweenDates(toDate) { 
 
    var dateEntered = toDate; 
 
    var now = new Date(); 
 
    var difference = dateEntered.getTime() - now.getTime(); 
 

 
    if (difference <= 0) { 
 

 
    // Timer done 
 
    clearInterval(timer); 
 

 
    } else { 
 

 
    var seconds = Math.floor(difference/1000); 
 
    var minutes = Math.floor(seconds/60); 
 
    var hours = Math.floor(minutes/60); 
 
    var days = Math.floor(hours/24); 
 

 
    hours %= 24; 
 
    minutes %= 60; 
 
    seconds %= 60; 
 

 
    $("#days").text(days); 
 
    $("#hours").text(hours); 
 
    $("#minutes").text(minutes); 
 
    $("#seconds").text(seconds); 
 
    } 
 
}

body { 
 
    background: #f5f5f5; 
 
} 
 
#timer { 
 
    font-family: Arial, sans-serif; 
 
    font-size: 20px; 
 
    color: #999; 
 
    letter-spacing: -1px; 
 
} 
 
#timer span { 
 
    font-size: 60px; 
 
    color: #333; 
 
    margin: 0 3px 0 15px; 
 
} 
 
#timer span:first-child { 
 
    margin-left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="timer"> 
 
    <span id="days"></span>days 
 
    <span id="hours"></span>hours 
 
    <span id="minutes"></span>minutes 
 
    <span id="seconds"></span>seconds 
 
</div>

来源

2017-08-30 Sazny14

那么每次刷新页面上面的代码都会被执行，然后将日期设置为16天。如果你需要它，那么从你第一次进入页面开始的16天内，你会想要做某种客户端持久化。这里最简单的选择是localStorage。 – Keith

感谢Keith的回应，如果你不介意可以告诉我该怎么做？ – Sazny14

[Countdown timer reset on page refresh]可能重复（https://stackoverflow.com/questions/24814462/countdown-timer-resets-on-page-refresh） – yuriy636

如果你想使用localStorage，下面可能会做。它将基本上存储首次运行的比较日期。

ps。由于代码段中的安全属性，这不会在这里工作，但应该在您的网站上工作。

var timer; 

var savedDate = localStorage.getItem('savedDate'); 
var compareDate = new Date(); 
if (savedDate) { 
    compareDate = new Date(savedDate); 
} else { 
    compareDate.setDate(compareDate.getDate() + 16); //incresed by to date + (16 days) 
    localStorage.setItem('savedDate', compareDate); 
} 

//...rest of code

来源

2017-08-30 09:55:51 Keith

完美Keith，非常感谢！ – Sazny14

没问题..只是一个小纸条，在将来发布的一个好主意是使用Stack Overflow的Snippet功能。它与codepen相同，但SO用户的额外奖励能够在SO内运行，并且可以轻松复制以进行修改等。我为您编辑了您的帖子，现在您会看到您可以单击“运行代码片段“来看看它的行动。 Snippet和最有可能的codepen的一个缺点是iFrame的安全属性阻止你做某些事情，这就是为什么我没有使用复制代码片段，因为它不会工作.. :( – Keith

亲爱的基思，我试图改变到目前为止，但它不工作！它仍然保持不变？ – Sazny14

由于您的倒计时你的页面开始时计算结束时间，这是正常/预期倒计时将重新启动每次刷新页面的时间。就你而言，你正在做的是将16天添加到当前日期。

如果你想coutdown不改变，你应该增加一个固定的日期，就像这样：

var compareDate = new Date(yyyy,MM,dd,hh,mm,ss);

更改yyyy，MM等用年，月，日，小时，分钟和值秒，如下例所示：

var compareDate = new Date(2017,09,10,12,00,00);

NB：该解决方案不依赖于客户端。它将为连接到该页面的每个用户显示完全相同的倒计时。

来源

2017-08-30 09:48:44

感谢您的回应Louis，但如果我这样做，如果我chk tmrw，它会从某一天开始回来吗？ – Sazny14

是的。如果我现在开始，并且如果我明天回去，我会看到剩余的15天 –

java脚本倒数计时器在页面刷新时得到重置

回答

相关问题