我现在已经在这个秒表上工作了 5-6 个小时。它是一个简单的秒表 html。我根本没有掌握问题/概念。我希望得到一点帮助，因为我看过的所有 W3Schools 页面以及其他堆栈溢出问题都没有让我接近我需要的地方。我正在尝试在 html 中创建 3 个 onclick 按钮来启动、停止和重置(甚至还没有到达重置部分)。 “时钟”应该从 0 开始，当停止时，它应该暂停在数字处，并且只能从 onclick 开始重新开始。重置按钮重置为 0。
我已经尝试使用 getElementById 和 innerHTML。我已经让按钮工作，但它正在将“结果”添加到自身 1、2、4、8 等。我相信这是一个相当简单的修复，但我已经尝试了几个小时的不同变化。
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Stopwatch</title>
</head>
<body>
<div>Seconds: <span id="time"></span></div>
<input type="button" id="startTimer" value="Start Timer" onclick="start();"><br/>
<input type="button" id="stopTimer" value="Stop Timer" onclick="stop();"><br/>
<input type="button" id="resetTimer" value="Reset Timer" onclick="reset();"><br/>
<script src= "timer.js"></script>
</body>
</html>
var timeElapsed = 0;
var myTimer = 0;
function start() {
myTimer = setInterval(function(){
timeElapsed += 1;
document.getElementById("time").innerText = timeElapsed;
}, 1000) ;
}
function stop() {
clearInterval(myTimer);
}
function reset() {
timeElapsed = 0;
clearInterval(myTimer);
document.getElementById("time").innerHTML = timeElapsed;
}
最佳答案
你不应该递增 myTimer 因为它存储了你稍后需要用 clearInterval(myTimer) 停止的间隔值.相反，您应该有一个像 timeElapsed 这样的变量，正如 @Programnik 在他的评论中提到的那样。
另请记住，任何不在您的 timer.js 文件中的函数中的 javascript 将在加载后立即运行。这意味着 setInterval(start, 1000)会马上跑。相反，您应该拥有 setInterval在调用开始。请注意，这将在每次调用 start 时创建一个新的 setInterval。我建议制作一个名为 tick 或其他名称的方法，以便您的代码功能有点像这样:
var timeElapsed = 0;
var myTimer;
function tick(){
timeElapsed++;
document.getElementById("time").innerHTML = timeElapsed;
}
function start(){
//call the first setInterval
myTimer = setInterval(tick, 1000);
}
function stop(){
clearInterval(myTimer);
}
function reset(){
//some combination of tick and stop
}
您可能会注意到，有人可能会向开始按钮发送垃圾邮件并使计时器走得非常快。这可以通过初始化 myTimer 来解决。到-1之类的东西，然后检查if(myTimer == -1)当您尝试开始时。您还必须重置 myTimer在您的停止方法中设置为 -1，以便可以恢复计时器。您可能还想在停止方法中做同样的事情。
要使计时器在启动时显示为 0，您可以这样做:<span id="time">0</span>
希望这对你有帮助，这是我很久以来对堆栈溢出的第一个回答
编辑: 这是我在回答你的问题时写的代码:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Stopwatch</title>
</head>
<body>
<div>Seconds: <span id="time">0</span></div>
<input type="button" id="startTimer" value="Start Timer" onclick="start();"><br/>
<input type="button" id="stopTimer" value="Stop Timer" onclick="stop();"><br/>
<input type="button" id="resetTimer" value="Reset Timer" onclick="reset();"><br/>
<script>
var timeElapsed = 0;
var timerID = -1;
function tick() {
timeElapsed++
document.getElementById("time").innerHTML = timeElapsed;
}
function start() {
if(timerID == -1){
timerID = setInterval(tick, 1000);
}
}
function stop() {
if(timerID != -1){
clearInterval(timerID)
timerID = -1
}
}
function reset() {
stop();
timeElapsed = -1;
tick()
}
</script>
</body>
</html>关于javascript - 创建一个简单的秒表 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56659035/