Javascript 创建简单的秒表html_Javascript_Setinterval_Buttonclick_Clearinterval

Javascript 创建简单的秒表html

javascript

Javascript 创建简单的秒表html,javascript,setinterval,buttonclick,clearinterval,Javascript,Setinterval,Buttonclick,Clearinterval,我已经在这块秒表上工作了5-6个小时了。它是一个简单的秒表html。我根本没有掌握问题/概念。我希望能得到一些帮助，因为我所看到的所有W3Schools页面以及其他堆栈溢出问题都没有让我找到我需要的地方。我试图在html中创建3个onclick按钮来启动、停止和重置（甚至还没有到重置部分）。“时钟”应在0处开始，停止时，应在该数字处暂停，并仅从onclick开始重新启动。重置按钮重置为0 我尝试过使用getElementById和innerHTML。我已经让按钮开始工作了，但是它将“结果”添加到

我已经在这块秒表上工作了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;
}


秒表
秒数：






var timeappeased=0；
var myTimer=0；
函数start（）{
myTimer=setInterval（函数（）{
时间流逝+=1；
document.getElementById（“time”）.innerText=TimePassed；
}, 1000) ;
}
函数停止（）{
清除间隔（myTimer）；
}
函数重置（）{
时间流逝=0；
清除间隔（myTimer）；
document.getElementById（“time”）.innerHTML=timepassed；
}
使用另一个变量记录运行时间：
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);
}

您不应该增加myTimer，因为它存储了稍后需要使用clearInterval（myTimer）
停止的间隔值。相反，您应该使用@Programnik在其评论中提到的类似timeappeased的变量
还请记住，任何不在timer.js文件中的函数中的javascript都将在加载后立即运行。这意味着设置间隔（开始，1000）
将立即运行。相反，您应该在调用start时使用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，以便计时器可以恢复。您可能还希望在stop方法中执行相同的操作
要使计时器在启动时显示0，只需执行以下操作：0

希望这是有帮助的，这是我很长时间以来第一个关于堆栈溢出的答案
编辑：
以下是我在回答您的问题时编写的代码：

秒表
秒：0






var timeappeased=0；
var-timerID=-1；
函数tick（）{
时间流逝++
document.getElementById（“time”）.innerHTML=timepassed；
}
函数start（）{
如果（timerID==-1）{
timerID=设置间隔（刻度，1000）；
}
}
函数停止（）{
如果（timerID！=-1）{
清除间隔（timerID）
timerID=-1
}
}
函数重置（）{
停止（）；
时间流逝=-1；
勾选（）
}
您正在增加myTimer，这是错误的。使用另一个变量跟踪经过的时间（例如timeappeased），并在start（）中增加该值，并在start（）中显示timeappeased。要终止计时器，请使用原始myTimer值。一旦从innerHTML获取myTimer，它就是一个字符串，因此请确保使用parseInt（）将其转换为整数谢谢。stop（）函数正在工作。但是，计时器在加载时启动。我正在寻找它开始点击。我需要一个集合函数吗？与其将“开始”作为setInterval的一部分，不如在按钮上附加一个单击事件，并在该功能中启动计时器
我想我是这样做的，就像上面使用的代码一样，一旦停止并单击开始按钮，它会将一个添加到计时器中，并且不会继续。我编辑了我的原始代码。它似乎工作得很好。你觉得怎么样？@KButler在我看来不错。如果您想确保用户不能垃圾邮件发送“开始”按钮，您需要执行var myTimer=-1
，然后检查它在“开始”中是否不==-1。但请确保在停止时将其重置为-1。哦，您还可以在reset中将clearInterval更改为调用stop（）现在停止是两行，您可以节省一点代码。@KButler当我在文章中将我的答案看作一个片段时，我添加了我编写的代码。