我做了（实际上是复制并做了一些修改）一个javascript定时器，但我不知道如何做，如果我刷新页面的定时器计数计数......
你可以在这里找到代码。
var ms = 0, s = 0, m = 60;
var timer;
var stopwatchEl = document.querySelector('.stopwatch');
var lapsContainer = document.querySelector('.laps');
function start() {
if (!timer) {
timer = setInterval(run, 10);
}
}
function run() {
stopwatchEl.textContent = (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s) + ":" + (ms < 10 ? "0" + ms : ms);
ms--;
if (ms < 0) {
ms = 99;
s--;
}
if (s < 0) {
s = 59;
m--;
}
if(m==0 && s==0 && ms==0) {
pause();
var figyelmeztetes = confirm("Lejárt az idő!");
}
stopwatchEl.textContent = (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s) + ":" + (ms < 10 ? "0" + ms : ms);
}
function pause() {
clearInterval(timer);
timer = false;
}
function stop() {
var figyelmeztetes = confirm("Vigyázz!!! Ezzel a számláló visszaáll 60 percre!");
if(figyelmeztetes == true) {
clearInterval(timer);
timer = false;
ms = 0;
s = 0;
m = 60;
stopwatchEl.textContent = (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s) + ":" + (ms < 10 ? "0" + ms : ms);
}
}.controls {
display: flex;
}<div class="controls">
<div onclick="start()">Start</div>
<div onclick="pause()">Pause</div>
<div onclick="stop()">Restart</div>
</div>
<div class="stopwatch">60:00:00</div>有没有什么简单的方法可以做到我想要的？
谢谢你的帮助
你可以像这样在本地存储中设置窗口解锁前的时间值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="controls">
<button onclick="start()">Start</button>
<button onclick="pause()">Pause</button>
<button onclick="stop()">Restart</button>
</div>
<div class="stopwatch">60:00:00</div>
</body>
</html>
var ms = 0,
s = 0,
m = 60;
var isCountingDown = false;
var timer;
window.addEventListener("load", function () {
if (window.localStorage.getItem("time") !== null) {
let obj = JSON.parse(window.localStorage.getItem("time"));
s = obj["s"];
ms = obj["ms"];
m = obj["m"];
stopwatchEl.textContent = `${m}:${s}:${ms}`;
start();
}
});
window.addEventListener("beforeunload", function () {
if (isCountingDown == true) {
pause();
let obj = {
ms: ms,
s: s,
m: m,
};
window.localStorage.setItem("time", JSON.stringify(obj));
}
});
var stopwatchEl = document.querySelector(".stopwatch");
var lapsContainer = document.querySelector(".laps");
function start() {
if (!timer) {
isCountingDown = true;
timer = setInterval(run, 10);
}
}
function run() {
stopwatchEl.textContent =
(m < 10 ? "0" + m : m) +
":" +
(s < 10 ? "0" + s : s) +
":" +
(ms < 10 ? "0" + ms : ms);
ms--;
if (ms < 0) {
ms = 99;
s--;
}
if (s < 0) {
s = 59;
m--;
}
if (m == 0 && s == 0 && ms == 0) {
pause();
var figyelmeztetes = confirm("Lejárt az idő!");
}
stopwatchEl.textContent =
(m < 10 ? "0" + m : m) +
":" +
(s < 10 ? "0" + s : s) +
":" +
(ms < 10 ? "0" + ms : ms);
}
function pause() {
clearInterval(timer);
timer = false;
}
function stop() {
var figyelmeztetes = confirm(
"Vigyázz!!! Ezzel a számláló visszaáll 60 percre!"
);
if (figyelmeztetes == true) {
clearInterval(timer);
timer = false;
ms = 0;
s = 0;
m = 60;
stopwatchEl.textContent =
(m < 10 ? "0" + m : m) +
":" +
(s < 10 ? "0" + s : s) +
":" +
(ms < 10 ? "0" + ms : ms);
}
}
你可以尝试将剩余的时间存储在 localStorage 并在页面加载时参考