刷新后如何继续运行我的倒计时？
我正在学习 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秒到达战场
在初始化秒和分钟之前的构造函数中，检查它们是否在存储中。如果它们不存在，则只设置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(); -
喵喵时光机
你可以通过这样做来做一个简单的技巧window.onload = function() { let minutes = sessionStorage.getItem("minutes") let seconds = sessionStorage.getItem("seconds") let newTimer = new Timer(seconds, minutes);};并且在 sessionStorage 中而不是存储整个 innerHtml 存储分钟和秒，希望它能解决您的问题 -
POPMUISE
如果存在，您可以使用存储检查功能覆盖分钟和秒参数。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 函数更改已在构造函数中设置的值。
随时随地看视频慕课网APP
相关分类
JavaScript