javascript - 重新加载浏览器页面后计时器刷新 - Javascript
问题描述
几天前,我在这个平台的人的帮助下建立了一个倒计时。我为此感谢他们。但我遇到了另一个问题。当我刷新页面时,整个计时器被重置,一切都恢复正常。我查了一下,意识到我需要在浏览器的本地存储中存储秒数。但是如何在我的代码中实现它是个问题。像我这样的类似问题有不同的解决方法。我尝试将其更改为他们的,但在刷新页面时计时器未显示,并且在必须禁用时启用按钮。请帮忙。
HTML
<div class="mdl-card__actions mdl-card--border">
<div>Timer : <span id="time1">05:00</span></div>
<div class="mdl-grid">
<div class="mdl-layout-spacer"></div>
<button id="coinbtn1" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">
50 coins
</button>
<div class="mdl-layout-spacer"></div>
</div>
</div>
JS
$("#coinbtn1").click(function() {
var uid = firebase.auth().currentUser.uid;
var coinRef = firebase.database().ref().child('users_coins').child(uid).child('coins');
var counter = 50;
coinRef.transaction(function (counter) {
return (counter || 0) + 50;
});
var fiveMinutes = 60 * 5,
display = document.querySelector('#time1');
startTimer1(fiveMinutes, display);
});
function startTimer1(duration, display) {
var timer = duration,
minutes, seconds;
var intervalFn1 = function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if(timer-1 != 0){
document.getElementById('coinbtn1').disabled = true;
}
if (timer-1 === 0) {
clearInterval(myVar1);
document.getElementById('coinbtn1').disabled = false;
}
--timer;
}
myVar1 = setInterval(intervalFn1, 900);
intervalFn1();
}
之前使用的代码...
$("#coinbtn1").click(function() {
var uid = firebase.auth().currentUser.uid;
var coinRef = firebase.database().ref().child('users_coins').child(uid).child('coins');
var counter = 50;
coinRef.transaction(function (counter) {
return (counter || 0) + 50;
});
/* var fiveMinutes = 60 * 5,
display = document.querySelector('#time1');
startTimer1(fiveMinutes, display); */
$time_limit = "2016-08-14 00:10:00"
var d = new Date($time_limit);
var hours = d.getHours(); //00 hours
var minutes = d.getMinutes(); //10 minutes
var seconds = 60 * minutes; // 600seconds
if (typeof(Storage) !== "undefined") {
if (localStorage.seconds) {
seconds = localStorage.seconds;
}
}
function secondPassed() {
var minutes = Math.round((seconds - 30) / 60);
console.log(minutes);
var hours = Math.round((minutes) / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
if (typeof(Storage) !== "undefined") {
localStorage.setItem("seconds", seconds);
}
document.getElementById('time1').innerHTML = "0" + minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(myVar);
document.getElementById('time1').innerHTML = "Time Out";
if (typeof(Storage) !== "undefined") {
localStorage.removeItem("seconds");
}
} else {
seconds--;
console.log(seconds);
}
}
var myVar = setInterval(secondPassed, 900);
});
解决方案
每次计时器滴答时,您可能都希望保存到 localStorage。像这样的东西:
localStorage.setItem('timerValue', timerValue); // assume timerValue is defined
当用户打开页面时,您需要检索所述项目:
var time = localStorage.getItem('time');
编辑:
我认为您的问题可能与以下代码有关:
if (localStorage.seconds) {
seconds = localStorage.seconds;
}
您正在检查 localStorage 是否seconds
在设置之前调用了一个属性,但是您第一次尝试保存seconds
此属性时将始终未定义。
推荐阅读
- html - 使用带有嵌入撇号的“包含”的赛普拉斯问题
- python - 使用 Python 将 .txt 文件的一部分提取到列表中
- firebase - 我如何知道用户是否已从 firebase 身份验证中删除 Flutter
- sql - 将 TIME 与 TIME ZONE 进行比较返回意外结果
- reactjs - 如何在 JEST 的 CRA 应用程序中使用“moduleDirectories”制作绝对导入模块
- java - 在java中使用线性搜索计算比较
- c# - 如何使用 Entity Framework Core 和 Database First 连接到 MacOS 上的 SQL 数据库
- powershell - [DateTime]::ParseExact 抛出异常
- laravel - Laravel Illuminate 不存储条目
- javascript - 如何在 for 循环中进行并发 api 调用?