javascript - 重新加载页面时如何使js计时器不重新启动?
问题描述
我做了(实际上是复制并做了一些更改)一个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);
}
}
推荐阅读
- sql-server - 查询不会返回数据库中的所有数据
- java - 如何在 springboot 2.2.6 中提供静态内容?
- database - 应该如何查看聊天应用的关系数据库?
- c# - 元素点击拦截异常
- javascript - 如何使 morris.js 条形图中的段彼此靠近?
- azure-devops - Azure Devops 发布测试结果任务 - 测试选项卡屏幕截图
- excel - 如何将 AND/OR 逻辑硬塞到 Excel 中现有的 INDEX 和 AGGREGATE 函数中?
- python - 如何使用 Python Selenium 获取元素内部的文本?
- c - 特定于指针的程序的输出
- xquery - 添加 ml 单元测试后,Marklogic mlreloadmodule 抛出错误