秒表计时器无法正常工作答案

【问题标题】：Stopwatch Timer doesn't work properly秒表计时器无法正常工作
【发布时间】：2014-12-10 09:15:48
【问题描述】：

我是一个初级 JavaScript“编码器”（PHP/C# 知识），我必须做一个秒表。

现在我有一个问题；每次启动按钮时，计时器都会走得更快，停止（暂停）按钮将停止工作。我似乎找不到合适的方法来解决它！

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



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



function startTimer() {
    timer();
    time = setInterval( timer, 1000);

}

function stopTimer() {
    clearInterval(time);
}


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
}

<!DOCTYPE html>
<html>
<head>
    <title>Stopwatch</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>


<div class="stopwatch">

    <div class="timer">
        <p id="timer">00:00:00</p>
    </div>

    <div class="start">
        <button>START</button>
    </div>

    <div class="stop">
        <button>STOP</button>
    </div>

</div>




<script src="myscript.js" type="text/javascript"></script>

</body>
</html>

【问题讨论】：

标签： javascript html css timer stopwatch

【解决方案1】：

单击开始时，您没有检查计时器当前是否处于活动状态，如果没有，则仅运行。因此，每次单击时，该函数都会运行……因此您会看到它正在加速。

若要补救，请将time 设置为初始和停止时为空，然后在启动计时器时检查此状态。

var display = document.getElementById("timer"),
  start = document.getElementsByClassName("start"),
  stop = document.getElementsByClassName("stop"),
  seconds = 0,
  minutes = 0,
  hours = 0,
  time = null; /* <--- set to null initially, not necessarily needed but makes things clear */



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



function startTimer() {
  if (time === null) { /* <--- only run the start function if the timer is not currently set */
    timer();
    time = setInterval(timer, 1000);
  }

}

function stopTimer() {
  clearInterval(time);
  time = null; /* <-- exclicitely clean the timer variable */
}


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
}

<!DOCTYPE html>
<html>

<head>
  <title>Stopwatch</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body>


  <div class="stopwatch">

    <div class="timer">
      <p id="timer">00:00:00</p>
    </div>

    <div class="start">
      <button>START</button>
    </div>

    <div class="stop">
      <button>STOP</button>
    </div>

  </div>




  <script src="myscript.js" type="text/javascript"></script>

</body>

</html>

【讨论】：

【解决方案2】：

您的问题是，如果您开始多次，您会运行多个间隔。所以更新会更快。

尝试以下方法：

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
}

这是一个小提琴：

timerWorking

我添加了一个变量，因此脚本知道计时器正在运行并且不会再次启动它。停止时，变量将设置为 false，一切恢复正常。开始按钮将再次起作用;)

【讨论】：

【解决方案3】：

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

counting = false,

接下来，您可以使用 if 函数检查 function startTimer 是否为真所以你会得到

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

你可以对function stopTimer 做同样的事情，但如果它是真的：

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

希望对你有帮助:)

【讨论】：

【解决方案4】：

您的代码在我的浏览器中根本不起作用，因此我通过使用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 函数！无论如何谢谢:)