计时器会在重新加载屏幕后返回一小时的Nan值



我制作了一个计时器,并使用本地存储将其保存在内存中,直到重新加载计时器。当我在日期输入中指定时间时,数字会正确显示。但一旦楠的数量被加载,它就被设置为小时。请帮我找出问题,谢谢。html&css代码:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.clock{
background-color: blue;
width: 400px;
text-align: center;
font-size: 1em;
color: white;
}
.clock > span{
padding: 10px;
border-radius: 10px;
background-color: black;
}
.clock > span > span{
padding: 5px;
border-radius: 10px;
background-color: red;
margin-right: 2px;
}
input{
padding: 15px;
margin: 20px;
font-size: 1.5em;
}
</style>
<body>
<div>
<input type="date" name="endDate">
<div class="clock">
<span><span class="days">0</span>day</span>
<span><span class="hours">0</span>Hours</span>
<span><span class="minutes">0</span>Minute</span>
<span><span class="seconds">0</span>second</span>
</div>
</div>
</body>
</html>

脚本代码:

<Script>
const endDate = document.querySelector("input[name='endDate']");
const clock = document.querySelector(".clock");
var timestop = false;
var timeInterval;
const savevalue = localStorage.getItem("counterdown") || false;
if (savevalue) {
startclock(savevalue);
let inputValue = new Date(savevalue);
endDate.valueAsDate = inputValue;
console.log(savevalue);
}
endDate.addEventListener("change", function (e) {
e.preventDefault();
clearInterval(timeInterval);
const temp = new Date(endDate.value);
localStorage.setItem("counterdown", temp);
startclock(temp);
timestop = false;
})
function startclock(t) {
function updates() {
var tl = (time(t));
if (tl.Total < 0) {
timestop = true;
}
for (var pro in tl) {
var elmn = clock.querySelector("." + pro);
if (elmn) {
elmn.innerHTML = tl[pro];
}
}
}
updates();
if (!timestop) {
timeInterval = setInterval(updates, 1000);
}
else {
clearInterval(timeInterval);
}
}
function time(t) {
var currenttime = new Date();
var Total = Date.parse(t) - Date.parse(currenttime);
var seconds = Math.floor((Total / 1000) % 60);
var minutes = Math.floor(((Total / 1000) / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(Total / (1000 * 60 * 60 * 24));
return {
"total": Total,
"days": days,
"hours": hours,
"minutes": minutes,
"seconds": seconds
};
}
</Script>

localStorage中的值的类型是字符串,即使您在localStorage.setItem中使用数字也是如此。当您使用localStorage.getItem时,类型将是字符串。

localStorage.setItem("a", 0)
let a = localStorage.getItem("a")
console.log(a)
// It's '0', not 0

简单地说,将数字字符串转换为数字类型,应该没问题。

最新更新