JavaScript 中的秒表

Question

在将问题标记为重复之前，我想告诉大家我已经完成了所有的秒表和 JavaScript 搜索，但是由于我是 JavaScript 的新手，所以我不能来我自己可能的解决方案，我需要你们的帮助。

我想实现的是用同一个按钮启动和停止手表。我可以停止手表但不能重新启动，不知道为什么。

看看下面的脚本并纠正我。

var startTimer = setInterval(function(){myTimer()}, 1000);

function myTimer(){
  var current = new Date();
  document.getElementById("timer").innerHTML = current.toLocaleTimeString();
}

function start(st){
  // Problem is in this statement
  // How can I call the global function variable again that's startTimer
  window[st]();
  var elem = document.getElementById("myButton");
  elem.innerHTML = "Stop";
  elem.addEventListener("click", stop);
}

function stop(){
  clearInterval(startTimer);
  var elem = document.getElementById("myButton");
  elem.innerHTML = "Start";
  elem.addEventListener("click", start(startTimer));
}

<p id="timer"></p>
<button id="myButton" onclick="stop(startTimer)">Stop</button>

Answer 1

您需要一个方法来处理 start/stop:

  var startTimer = setInterval(myTimer, 1000),
        timerElement = document.getElementById("timer"),
        buttonElement = document.getElementById("myButton");
    
    function myTimer(){
        var current = new Date();
        timerElement.innerHTML = current.toLocaleTimeString();
    }
    
    function toggle(){
        if (startTimer) {
            clearInterval(startTimer);
            startTimer = null;
            buttonElement.innerHTML = "Start";
        } else {
            buttonElement.innerHTML = "Stop";
            startTimer = setInterval(myTimer, 1000);
        }
    }

   <p id="timer"></p>
    <button id="myButton" onclick="toggle()">Stop</button>

Answer 2

为什么要清除间隔？ 追赶间隔离开的地方。

var timer  = document.getElementById("timer"),
    paused = 0;

setInterval(function(){
  if(!paused) timer.innerHTML =  new Date().toLocaleTimeString();
}, 1000);

document.getElementById("myButton").addEventListener("click", function(){
  this.innerHTML = (paused ^= 1) ? "Start" : "Stop";
});

<p id="timer"></p>
<button id="myButton">Stop</button>

P.S: Always 缓存您计划重用的元素，特别是在间隔 fn 内时。

(paused ^= 1) 用于切换 ones 和 zeroes 1,0,1,0,1... 用作 boolean.

JavaScript 中的秒表

Stopwatch in JavaScript

html

javascript

stopwatch