pause/play a timer using javascript

Question

I am not proficient in Javascript. I am trying to set a timer for 5 minutes for a workout activity. However, when i press the play button, the timer decreases but when i press the play button again, it overlaps with the current timer.

How do i pause the timer and only allow it to be clicked once? Should i set another button for pause? This is the code:

<!--JS for timer countdown, have to find a way to prevent button from keep pressing-->
            <script type="text/javascript">
                function startTimer() {
                    var btton = document.getElementById('start')
                    var min = 0;
                    var sec = 59;
                    setInterval(function () {
                        document.getElementById("timer").innerHTML = min + ":" + sec;
                        sec--;
                        if (sec == -1) {
                            min--;
                            sec = 59;
                        }
                        if (min == -1) {
                            clearTimeout();
                        }
                        if (sec < 10) {
                            sec = "0" + sec;
                        }

                    }, 1000);
                }


            </script>
            <div id="timer">

                <div id="time">5:00</div>
            </div>
            <img id="start" src="../img/icons/play-button.png" onclick="return startTimer()">

You may want to use `Date` objects to store the start and end time and calculate how much time is left based off of those instead of relying on the interval to tick away the seconds. `setInterval` is not necessarily super accurate which makes timers like this drift over time. See https://stackoverflow.com/questions/29971898/how-to-create-an-accurate-timer-in-javascript — Elan Hamburger, Apr 28 '20 at 04:50

Hien Nguyen · Accepted Answer · 2020-04-28T05:44:30.197

You can create an variable to store timerId, and clear by clearInterval

function pause() {
  clearInterval(timerId);
}

var timerId;
var min = 0;
                    var sec = 59;
                    var isplay = true;
                    document.getElementById('pause').style.display = 'none';
                function startTimer() {
                    var btton = document.getElementById('start').style.display = 'none';
                    document.getElementById('pause').style.display = 'inline';
                    
                    timerId = setInterval(function () {
                        document.getElementById("timer").innerHTML = min + ":" + sec;
                        sec--;
                        if (sec == -1) {
                            min--;
                            sec = 59;
                        }
                        if (min == -1) {
                            clearTimeout();
                        }
                        if (sec < 10) {
                            sec = "0" + sec;
                        }

                    }, 1000);
                }

function pause() {
  clearInterval(timerId);
  document.getElementById('start').style.display = 'inline';
  document.getElementById('pause').style.display = 'none';
}

<div id="timer">

                <div id="time">5:00</div>
            </div>
            <button id="start" onclick="return startTimer()">Start</button>
            
            <button id='pause' onclick="pause()">Pause</button>

Thank you, it works! May i ask an additional question, how do i hide the play button and show the pause button when i click the play button, and hide the pause button and show the play button when i click the pause button? — Ruiru, Apr 28 '20 at 05:30

pause/play a timer using javascript

1 Answers1