持久的 jQuery 倒计时
Posted
技术标签:
【中文标题】持久的 jQuery 倒计时【英文标题】：Persistent jQuery Countdown 【发布时间】：2020-09-10 02:40:30 【问题描述】：我们正在尝试设置从 5 天开始的倒计时。我们设法使用下面的代码使其工作。但是，当您重新加载页面时，它会刷新到 5 天。我想知道我们如何才能使它在您刷新或重新加载页面时不会重置为 5 天。我对 javascript 的经验非常少，我不知道下一步该做什么。
<html>
<body>
<span id="countdown" class="timer">7200</span>
<script type="text/javascript">
var first_time = true;
var countdownTimer;
var seconds = document.getElementById('countdown').innerHTML * 60;
//alert(seconds);
if(!isNaN(seconds) && seconds > 0 )
function timer()
if(first_time)
countdownTimer = setInterval('timer()', 1000);
first_time = false;
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10)
remainingSeconds = "0" + remainingSeconds;
document.getElementById('countdown').innerHTML = (days < 10 ? "0" : "") + days + ":" + (hours < 10 ? "0" : "") + hours + ":" + (minutes < 10 ? "0" : "") + minutes + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds;
if (seconds == 0)
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
else
seconds--;
timer()
//var countdownTimer = setInterval('timer()', 1000);
</script>
</body>
</html>
【问题讨论】：
欢迎来到 SO @user2753460！希望你喜欢这里。您是否考虑过：1. Cookie，或 2. 本地存储？ 谢谢。 @彼得卡。我正在研究 cookie，但我不知道它是如何解决的。 【参考方案1】：检查网络存储支持并使用它来存储您的计数器；如果不支持将计数器存储在 cookie 中：
if (typeof(Storage) !== "undefined")
// You can use localStorate to store the seconds
localStorage.setItem("seconds", secs);
else
// Sorry! No Web Storage support.. use cookie
但是，在页面加载时运行的代码的开头，读取计数器并从您离开的地方继续：
var seconds;
if (typeof(Storage) !== "undefined" && localStorage.seconds)
seconds = localStorage.getItem("seconds");
else if (typeof(Storage) === "undefined")
//read cookie (if using cookie)
else
seconds = document.getElementById('countdown').innerHTML * 60;
Fiddle Demo
【讨论】：
以上是关于持久的 jQuery 倒计时的主要内容，如果未能解决你的问题，请参考以下文章