我正在学习 JS，但我被困住了......我想创建一个倒计时（它已经完成，我的倒计时正在工作），当页面重新加载时它会继续运行。我使用 sessionStorage 来“保存”倒计时值，并在页面加载时检查 sessionStorage 是否存在。问题是，我不知道如何使用保存在 sessionStorage 中的值继续运行倒计时。请你帮助我好吗？class Timer { constructor(secondes, minutes) { this.secondes = secondes; this.minutes = minutes; this.button = document.getElementById("button"); this.counter = document.getElementById("counter"); this.storageCheck(); } countdown(minutes) { var seconds = this.secondes; var mins = this.minutes; var myCounter = this.counter; function tick() { var current_minutes = mins-1; seconds--; myCounter.innerHTML = current_minutes + ":" + (seconds < 10 ? "0" : "") + seconds; var duration = sessionStorage.setItem("timer", myCounter.innerHTML); if( seconds > 0 ) { setTimeout(tick, 1000); } else { if(mins > 1){ countdown(mins-1); } } } tick(); } buttonClick() { button.addEventListener("click", () => { this.countdown(this.minutes); }) } storageCheck() { if (sessionStorage.getItem("timer")) { // keep the countdown running } }}let newTimer = new Timer(60, 20);newTimer.buttonClick();<!DOCTYPE html><html><head> <title>Test Countdown</title></head><body> <div id="counter"></div> <button id="button">Run</button> <script type="text/javascript" src="countdown.js"></script></body></html>
3 回答
30秒到达战场
TA贡献1828条经验 获得超6个赞
在初始化秒和分钟之前的构造函数中，检查它们是否在存储中。如果它们不存在，则只设置this.secondes = secondes和this.minutes = minutes;
constructor(secondes, minutes) {
this.button = document.getElementById("button");
this.counter = document.getElementById("counter");
if(!this.storageCheck()){ //check if seconds are mins are stored in storage
this.secondes = secondes; //if not set mins and sec to value passed in constructor
this.minutes = minutes;
}
else{
this.countdown(this.minutes);
}
}
在存储检查功能中，检查值是否存在，如果获取值并设置为 this.secondes 和 this.minutes 并返回 true 否则返回 false
storageCheck() {
//if both mins and secs exists
if (sessionStorage.getItem("mins") &&sessionStorage.getItem("secs")) {
// keep the countdown running
this.minutes=parseInt(sessionStorage.getItem("mins"));//get min
this.secondes=parseInt(sessionStorage.getItem("secs"));//get secs
return true;
}
else
return false;
}
并在倒计时功能中将值保存到存储中
sessionStorage.setItem("mins",vm.minutes);//set current min
sessionStorage.setItem("secs",vm.secondes);//set current sec
尝试在这里运行：https ://jsbin.com/bavexigute/1/edit?html,js,console,output
class Timer {
constructor(secondes, minutes) {
this.button = document.getElementById("button");
this.counter = document.getElementById("counter");
if(!this.storageCheck()){ //check if seconds are mins are stored in storage
this.secondes = secondes; //if not set mins and sec to value passed in constructor
this.minutes = minutes;
}
else{
this.countdown();
}
}
countdown() {
debugger;
var vm=this;
if(!(this.minutes-1<0))
this.minutes--;
let tick= function(){
vm.secondes--
if(vm.secondes==0){
vm.secondes=59;
vm.minutes--;
}
vm.counter.innerHTML = vm.minutes + ":" + (vm.secondes < 10 ? "0" : "") + vm.secondes;
if(vm.minutes == 0 && vm.secondes-1==0){
vm.secondes--;
vm.counter.innerHTML = vm.minutes + ":" + vm.secondes-1;
}
else{
setTimeout(tick,1000);
}
sessionStorage.setItem("mins",vm.minutes);//set current min
sessionStorage.setItem("secs", vm.secondes);//set current sec
}
setTimeout(tick,1000);
}
buttonClick() {
button.addEventListener("click", () => {
this.countdown();
})
}
storageCheck() {
//if both mins and secs exists
if (sessionStorage.getItem("mins") && sessionStorage.getItem("secs")) {
// keep the countdown running
this.minutes=parseInt(sessionStorage.getItem("mins"));//get min
this.secondes=parseInt(sessionStorage.getItem("secs"));//get secs
return true;
}
else
return false;
}
}
let newTimer = new Timer(60, 20);
newTimer.buttonClick();
喵喵时光机
TA贡献1846条经验 获得超7个赞
你可以通过这样做来做一个简单的技巧
window.onload = function() {
let minutes = sessionStorage.getItem("minutes")
let seconds = sessionStorage.getItem("seconds")
let newTimer = new Timer(seconds, minutes);
};
并且在 sessionStorage 中而不是存储整个 innerHtml 存储分钟和秒，希望它能解决您的问题
POPMUISE
TA贡献1765条经验 获得超5个赞
如果存在，您可以使用存储检查功能覆盖分钟和秒参数。
constructor(mins, secs) {
this.mins = mins
this.secs = secs
this.checkStorage = this.checkStorage.bind(this)
this.checkStorage(mins, secs)
}
checkStorage(mins, secs) {
if(window.storage) { // or whatever
this.secs = window.storage.secs
this.mins = window.storage.mins
}
}
类似的东西。基本上只需让 setStorage 函数更改已在构造函数中设置的值。
添加回答
举报
0/150
提交
取消