Секундомер в 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

Вы хотите один метод, чтобы заботиться о запуске/остановке:

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

<script type="text/javascript"> 
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); 
    } 
} 
</script> 

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: Всегда элементы кэша вы собираетесь повторно использовать, особенно если внутри интервала Fn.

(paused ^= 1) используется для переключения туров и нулей 1,0,1,0,1... используется не как boolean.