Question

我现在已经在制作这款秒表5-6个小时了。它的意思是成为一个简单的秒表html。我根本不掌握问题/概念。我希望能得到一点帮助，因为我查看过的所有W3Schools页面以及其他堆栈溢出问题都没有使我到达需要的位置。我试图在html中创建3个onclick按钮以开始，停止和重置（甚至没有到达重置部分）。 “时钟”应从0开始，并且在停止时应在数字处暂停，并且仅从onclick开始重新开始。重置按钮重置为0。

我尝试使用getElementById和innerHTML。我已经可以使用该按钮了，但是它向其本身1,2,4,8等添加了“结果”。我确信这是一个相当简单的解决方法，但是我已经尝试了数小时的不同变化。 / p>

<!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;
}

Answer 1

您不应增加myTimer，因为它存储了以后需要用clearInterval(myTimer)停止的时间间隔的值。相反，您应该像@Programnik在他的评论中提到的那样拥有一个像timeElapsed这样的变量。

还请记住，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)，则可以解决此问题。您还必须在stop方法中将myTimer重置为-1，以便可以恢复计时器。您可能还想在stop方法中做同样的事情。

要使计时器在启动时显示为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>

Answer 2

使用另一个变量记录经过时间：

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);
   myTimer = setInterval(start, 1000);
}

创建一个简单的秒表html

2 个答案: