我正在 JavaScript 中制作秒表，但我的代码存在一些问题。它工作正常，但有一部分搞砸了。当毫秒小于 100 时，我点击停止然后重新开始，毫秒返回 0 并继续计数。我将在此处附上视频：https://drive.google.com/file/d/1CKezv6hYjRfunOC4GdkBJr5n0MsXybEB/view 这是我的代码：
function init(){
var myInterval;
var minutes;
var seconds;
var hundredths;
document.getElementById('btnStart').addEventListener("click", function(){
if(document.getElementById("minutes").innerHTML !== "00"){
minutes = parseInt(document.getElementById("minutes").innerHTML);
}
if(document.getElementById("hundredths").innerHTML !== "00"){
hundredths = parseInt(document.getElementById("hundredths").innerHTML);
}
if(document.getElementById("seconds").innerHTML !== "00"){
seconds = parseInt(document.getElementById("seconds").innerHTML);
}
else{
hundredths = 0;
minutes = 0;
seconds = 0;
}
myInterval = setInterval(function() {
hundredths++;
if(hundredths >= 10){
document.getElementById("hundredths").innerHTML = hundredths;
}
if(hundredths <= 9){
document.getElementById("hundredths").innerHTML = "0" + hundredths;
}
if(hundredths > 99){
hundredths = 0;
seconds++;
if(seconds > 59){
seconds = 0;
hundredths = 0;
minutes++;
if(minutes < 10){
document.getElementById("minutes").innerHTML = "0" + minutes;
}
if(minutes >= 10){
document.getElementById("minutes").innerHTML = minutes;
}
}
if(seconds < 10){
document.getElementById("seconds").innerHTML = "0" + seconds;
}
if(seconds >= 10){
document.getElementById("seconds").innerHTML = seconds;
}
}
}, 10);
});
document.getElementById('btnStop').addEventListener("click", function(){
clearInterval(myInterval);
minutes = parseInt(document.getElementById("minutes").innerHTML);
seconds = parseInt(document.getElementById("seconds").innerHTML);
hundredths = parseInt(document.getElementById("hundredths").innerHTML);
});
document.getElementById('btnReset').addEventListener("click", function(){
clearInterval(myInterval);
document.getElementById("minutes").innerHTML = "00";
document.getElementById("seconds").innerHTML = "00";
document.getElementById("hundredths").innerHTML = "00";
});
}<html>
<head>
<title>JS StopWatch</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#container{
background-color: lightgreen;
display:flex;
flex-direction: column;
align-items: center;
margin-left: auto;
margin-right: auto;
width:35%;
}
#buttonContainer{
display: flex;
flex-direction: row;
justify-content: center;
column-gap: 20px;
margin-top: 20px;
margin-bottom: 40px;
}
input{
width:50%;
border-radius: 10px;
font-size: 2em;
}
span{
font-size:2em;
}
</style>
</head>
<body onload = "init()">
<div id="container">
<div><h1>STOPWATCH</h1></div>
<div><h1>MY JAVASCRIPT STOPWATCH</h1></div>
<div id="timeDisplay">
<SPAN id="minutes">00</SPAN>:<SPAN id="seconds">00</SPAN>:<SPAN id="hundredths">00</SPAN>
</div>
<div id="buttonContainer">
<input type="button" id="btnStart" value="Start">
<input type="button" id="btnStop" value="Stop">
<input type="button" id="btnReset" value="Reset">
</div>
</div>
</body>
</html>回答1
你在这里搞砸了，你检查 seconds == 0 并更新 hundredths = 0。所以每次在到达 1 second 之前停止，毫秒都会更新为 0。
if(document.getElementById("seconds").innerHTML !== "00"){
seconds = parseInt(document.getElementById("seconds").innerHTML);
}else{
hundredths = 0;
minutes = 0;
seconds = 0;
}注意：您的代码可以最小化，但我没有。自己做
更新代码
function init(){
var myInterval;
var minutes;
var seconds;
var hundredths;
document.getElementById('btnStart').addEventListener("click", function(){
if(document.getElementById("minutes").innerHTML !== "00"){
minutes = parseInt(document.getElementById("minutes").innerHTML);
} else {
minutes = 0;
}
if(document.getElementById("hundredths").innerHTML !== "00"){
hundredths = parseInt(document.getElementById("hundredths").innerHTML);
} else {
hundredths = 0;
}
if(document.getElementById("seconds").innerHTML !== "00"){
seconds = parseInt(document.getElementById("seconds").innerHTML);
} else {
seconds = 0;
}
myInterval = setInterval(function() {
hundredths++;
if(hundredths >= 10){
document.getElementById("hundredths").innerHTML = hundredths;
}
if(hundredths <= 9){
document.getElementById("hundredths").innerHTML = "0" + hundredths;
}
if(hundredths > 99){
hundredths = 0;
seconds++;
if(seconds > 59){
seconds = 0;
hundredths = 0;
minutes++;
if(minutes < 10){
document.getElementById("minutes").innerHTML = "0" + minutes;
}
if(minutes >= 10){
document.getElementById("minutes").innerHTML = minutes;
}
}
if(seconds < 10){
document.getElementById("seconds").innerHTML = "0" + seconds;
}
if(seconds >= 10){
document.getElementById("seconds").innerHTML = seconds;
}
}
}, 10);
});
document.getElementById('btnStop').addEventListener("click", function(){
clearInterval(myInterval);
minutes = parseInt(document.getElementById("minutes").innerHTML);
seconds = parseInt(document.getElementById("seconds").innerHTML);
hundredths = parseInt(document.getElementById("hundredths").innerHTML);
});
document.getElementById('btnReset').addEventListener("click", function(){
clearInterval(myInterval);
document.getElementById("minutes").innerHTML = "00";
document.getElementById("seconds").innerHTML = "00";
document.getElementById("hundredths").innerHTML = "00";
});
}<html>
<head>
<title>JS StopWatch</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#container{
background-color: lightgreen;
display:flex;
flex-direction: column;
align-items: center;
margin-left: auto;
margin-right: auto;
width:35%;
}
#buttonContainer{
display: flex;
flex-direction: row;
justify-content: center;
column-gap: 20px;
margin-top: 20px;
margin-bottom: 40px;
}
input{
width:50%;
border-radius: 10px;
font-size: 2em;
}
span{
font-size:2em;
}
</style>
</head>
<body onload = "init()">
<div id="container">
<div><h1>STOPWATCH</h1></div>
<div><h1>MY JAVASCRIPT STOPWATCH</h1></div>
<div id="timeDisplay">
<SPAN id="minutes">00</SPAN>:<SPAN id="seconds">00</SPAN>:<SPAN id="hundredths">00</SPAN>
</div>
<div id="buttonContainer">
<input type="button" id="btnStart" value="Start">
<input type="button" id="btnStop" value="Stop">
<input type="button" id="btnReset" value="Reset">
</div>
</div>
</body>
</html>回答2
通过 clearInterval 调用 stop 时，会保留最后一个 value 秒计时器，在开始新的计时器会话之前尝试将其重新初始化为零
stopTimer(){
clearInterval(myInterval)
minutes = 0;
secons = 0;
hours = 0
}