Как сохранить обратный отсчет таймера javascript для викторины, которая не сбрасывается
Мне нужна помощь для хранения времени для этого обратного отсчета таймера, он работает нормально, но когда я нажимаю кнопку «Обновить» или возвращаюсь к браузеру, таймер запустит его снова, например, в 15:00, тогда пример запуска таймера будет 9:00, если я нажму кнопку «Обновить». он вернется к 15:00.
(function() {
function display(notifier, str) {
document.getElementById(notifier).innerHTML = str;
}
function toMinuteAndSecond(x) {
return ~~(x / 60) + ":" + (x % 60 < 10 ? "0" : "") + x % 60;
}
function setTimer(remain, actions) {
var action;
(function countdown() {
display("countdown", toMinuteAndSecond(remain));
if (action = actions[remain]) {
action();
}
if (remain > 0) {
remain -= 1;
setTimeout(arguments.callee, 1000);
}
})(); // End countdown
}
setTimer(900, {
120: function() {
display("notifier", "Just 1 minute to go");
},
50: function() {
display("notifier", "50 seconds left");
},
}
}
);
})();<span id = "notifier"></span>Некоторые разумные отступы кода были бы хорошей идеей. Это помогает нам читать код и, что более важно, помогает вы отлаживаете свой кодВзгляните на стандарт кодирования в ваших интересах. Вас могут попросить изменить этот код через несколько недель/месяцев, и в конце вы поблагодарите меня.
Я создал фрагмент и получаю синтаксическую ошибку в консоли. Пожалуйста исправьте
привет, сэр, epascarello, спасибо, как насчет того, чтобы сделать это на javascript?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В JS — обратите внимание, куда я поместил localStorage (который не запускается во фрагменте) Я также исправил ошибки в размещенном коде
(function() {
function display(notifier, str) {
document.getElementById(notifier).innerHTML = str;
}
function toMinuteAndSecond(x) {
return ~~(x / 60) + ":" + (x % 60 < 10 ? "0" : "") + x % 60;
}
function setTimer(remain, actions) {
var action;
(function countdown() {
// add localStorage.setItem("countdown",remain)
display("countdown", toMinuteAndSecond(remain));
if (action = actions[remain]) {
action();
}
if (remain > 0) {
remain -= 1;
setTimeout(arguments.callee, 1000);
}
else display("countdown","Done");
})(); // End countdown
}
setTimer(30, { // change 30 to +localStorage.getItem("countdown") || 30;
20: function() {
display("countdown", "Just 20 seconds to go");
},
10: function() {
display("countdown", "10 seconds left");
},
});
})();<span id = "countdown"></span>это работает, спасибо, моя единственная проблема сейчас заключается в том, как заставить его начать снова, хе-хе, большое спасибо, сэр mplungjan
как снова запустить таймер, если они снова захотят пройти викторину
<input type = "button" onclick = "localStorage.setItem('countdown',900); location.reload()" />Здесь мы должны хранить переменную remain в локальном хранилище. переменные в локальном хранилище будут доступны даже после обновления.
Прикрепите код, который будет работать так, как вы ожидаете.
(function() {
function display(notifier, str) {
document.getElementById(notifier).innerHTML = str;
}
function toMinuteAndSecond(x) {
return ~~(x / 60) + ":" + (x % 60 < 10 ? "0" : "") + x % 60;
}
function setTimer(remain, actions) {
var action;
localStorage.remain = remain;
(function countdown() {
remain = localStorage.remain;
display("countdown", toMinuteAndSecond(remain));
if (action = actions[remain]) {
action();
}
if (remain > 0) {
localStorage.remain -= 1;
setTimeout(arguments.callee, 1000);
}
})(); // End countdown
}
setTimer(900, {
120: function() {
display("notifier", "Just 1 minute to go");
},
50: function() {
display("notifier", "50 seconds left");
},
}
}
);
})();
Поэтому сохраните время начала сеанса на PHP, и при загрузке страницы используйте время, чтобы вычислить, сколько времени осталось.