Question

我是JavaScript＆＃34;编码器＆＃34; （PHP / C＃知识）我必须制作一个秒表。

现在我遇到了问题;每次启动按钮时，计时器将更快，停止（暂停）按钮将停止工作。我似乎找不到合适的方法来解决它！

＆＃13;

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
}

＆＃13;

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

＆＃13;

Answer 1

单击开始时，您不检查计时器当前是否处于活动状态，否则仅运行。因此，每次单击时，无论如何都会运行该功能......所以你会看到它加速。

要解决此问题，请将time初始化为null并在停止时，然后在启动计时器时检查此状态。

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>

Answer 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，一切都恢复正常。开始按钮将再次起作用;）

Answer 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);
    }
}

希望有所帮助：）

Answer 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>

秒表计时器无法正常工作

4 个答案: