Javascript 秒表计时器工作不正常_Javascript_Html_Css_Timer_Stopwatch

Javascript 秒表计时器工作不正常

javascript html css timer

Javascript 秒表计时器工作不正常,javascript,html,css,timer,stopwatch,Javascript,Html,Css,Timer,Stopwatch,我是一名具有PHP/C知识的初级JavaScript程序员，我必须制作秒表现在我有一个问题；每次按下“开始”按钮时，计时器都会加快，而“停止”按钮将停止工作。我似乎找不到合适的方法来修复它 var display=document.getElementByIdtimer， start=document.getElementsByClassNamestart， stop=document.getElementsByClassNamestop，秒=0，分钟=0，小时=0，时间开始[0]

我是一名具有PHP/C知识的初级JavaScript程序员，我必须制作秒表

现在我有一个问题；每次按下“开始”按钮时，计时器都会加快，而“停止”按钮将停止工作。我似乎找不到合适的方法来修复它

var display=document.getElementByIdtimer， start=document.getElementsByClassNamestart， stop=document.getElementsByClassNamestop，秒=0，分钟=0，小时=0，时间开始[0]。添加EventListener'click'，startTimer；停止[0]。添加EventListener“单击”，停止计时器；功能启动器{ 定时器；时间=设置间隔计时器，1000； } 功能停止计时器{ 间隔时间； } 功能计时器{ display.innerHTML=ExtraZerohours+：+ExtraZerominutes+：+ExtraZeroseconds；秒++；如果秒数>=60{ 秒=0；分钟++；如果分钟数>=60{ 分钟=0；小时++； } } } 超零函数{ 如果我<10 { i=0+i } 返回i } 秒表

00:00:00

开始停止

单击“开始”时，您没有检查计时器当前是否处于活动状态，只有在未处于活动状态时才检查计时器是否正在运行。因此，每次单击时，函数都在运行，因此您会看到它正在加速

要进行补救，请在开始和停止时将time设置为null，然后在启动计时器时检查此状态

var display=document.getElementByIdtimer， start=document.getElementsByClassNamestart， stop=document.getElementsByClassNamestop，秒=0，分钟=0，小时=0，

时间=空；/* 您的问题是，如果您多次启动，则会有多个间歇运行。所以更新会更快

请尝试以下操作：

var display = document.getElementById("timer"),
start = document.getElementsByClassName("start"),
stop = document.getElementsByClassName("stop"),
seconds = 0,
minutes = 0,
hours = 0,
time;
run = false;


start[0].addEventListener('click', startTimer);
stop[0].addEventListener('click', stopTimer);



function startTimer() {

if (!run){
    timer();
    run = true;
    time = setInterval( timer, 1000);
}else{
    alert("Timer already running");
}
}

function stopTimer() {
clearInterval(time);
run = false;
}


function timer(){
display.innerHTML = ExtraZero(hours)+":"+ExtraZero(minutes)+":"+ExtraZero(seconds);

seconds++;

if (seconds >= 60){
    seconds = 0;
    minutes++;

    if (minutes >= 60){
        minutes = 0;
        hours ++;
    }
}
}



function ExtraZero(i) {
if (i < 10)
{
    i = "0" + i
}
return i
}

这是一把小提琴：

我添加了一个变量，因此脚本知道计时器正在运行，不会再次启动它。

停止时，变量将设置为false，一切恢复正常。启动按钮将再次工作

您可以添加一个名为counting的布尔值，将其添加到变量中

counting = false,

接下来，您可以检查函数startTimer是否对if函数为true 所以你会得到

function startTimer() {
    if (counting == false){
        counting = true
        timer();
        time = setInterval( timer, 1000);
    }
}

您也可以对函数stopTimer执行相同的操作，但如果其为真：

function stopTimer() {
    if (counting == true){
        counting = true;
        clearInterval(time);
    }
}

希望有帮助：

您的代码在我的浏览器中根本不起作用，因此我使用onClick赋予按钮功能来简化代码，并使用-1作为计时器关闭标志

<html>
<head>
<title>Stopwatch</title>
<script type="text/javascript">
var seconds = 0, minutes = 0, hours = 0;
var time = -1;

function ExtraZero(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

function timer() {
  document.getElementById('timer').innerHTML = "" + ExtraZero(hours) + ":" + ExtraZero(minutes) + ":" + ExtraZero(seconds);
  seconds++;
  if (seconds >= 60) {
    seconds = 0;
    minutes++;
    if (minutes >= 60) {
      minutes = 0;
      hours++;
    }
  }
}

function startTimer() {
  if (time == -1) {
    timer();
    time = setInterval(timer, 1000);
  }
}

function stopTimer() {
  if (time != -1) {
    clearInterval(time);
    time = -1;
  }
}

function resetTimer() {
  stopTimer();
  hours = minutes = seconds = 0;
  document.getElementById('timer').innerHTML = "00:00:00";
}

</script>
</head>
<body>
<div class="stopwatch">
    <div class="timer"><p id="timer">00:00:00</p></div>
    <div class="start"><button onClick='startTimer()'>START</button></div>
    <div class="stop"><button onClick='stopTimer()'>STOP</button></div>
    <div class="reset"><button onClick='resetTimer()'>RESET</button></div>
</div>
</body>
</html>

我们不允许将onClick函数用于此分配！无论如何，谢谢你：