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

您需要一个方法来处理启动/停止：

  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)

用于切换 1 和 0

1,0,1,0,1...

用作

boolean

。

Answer 3

如何在 JavaScript 中制作秒表： ⌚ ⏳

const startBtn = document.querySelector('#start');
const stopBtn = document.querySelector('#stop');
const resetBtn = document.querySelector('#reset');

let sec = document.querySelector('#sec');
let min = document.querySelector('#min');
let hour = document.querySelector('#hour');

secInner = +sec.innerHTML;
minInner = +min.innerHTML;
hourInner = +hour.innerHTML;
// console.log(sec);
// console.log(secInner);
let timer;

const startProcess = function(){
    if(sec.innerHTML < 59){
        if(sec.innerHTML < 9){
            secInner += 1;
            sec.innerHTML = '0' + secInner;
        }
        else{
            secInner += 1;
            sec.innerHTML = secInner;
        }
    }
    else{
        secInner = 0;
        sec.innerHTML = "00";
        // minutes
        if(min.innerHTML < 59){
            if(min.innerHTML < 9){
                minInner += 1;
                min.innerHTML = '0' + minInner;
            }
            else{
                minInner += 1;
                min.innerHTML = minInner;
            }
        }
        else{
            minInner = 0;
            min.innerHTML = "00";

            if(hour.innerHTML < 23){
                if(hour.innerHTML < 9){
                    hourInner += 1;
                    hour.innerHTML = '0' + hourInner;
                }
                else{
                    hourInner += 1;
                    hour.innerHTML = hourInner;
                }
            }
            else{
                clearInterval(timer);

                secInner = 0;
                sec.innerHTML = "00";

                minInner = 0;
                min.innerHTML = "00";

                hourInner = 0;
                hour.innerHTML = "00";
            }
        }
    }



}

startBtn.addEventListener('click', ()=>{
    timer = setInterval(startProcess, 1000);
})

stopBtn.addEventListener('click', ()=>{
    clearInterval(timer);
})

resetBtn.addEventListener('click', ()=>{
    clearInterval(timer);
    secInner = 0;
    minInner = 0;
    hourInner = 0;
    sec.innerHTML = "00";
    min.innerHTML = "00";
    hour.innerHTML = "00";
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stop watch</title>
    <script src="script.js" defer></script>
</head>
<body>
    <span id="hour">00</span>
    <span>:</span>
    <span id="min">00</span>
    <span>:</span>
    <span id="sec">00</span> <br> <br>

    <button id="start">start</button>
    <button id="stop">stop</button>
    <button id="reset">reset</button>
</body>
</html>