Implementing pause in timer using html js

Question

I am trying to implement a timer using html and js. I am using setInterval() and clearInterval() for the same. Until now I have been able to do with starting and stopping the timer. The 'pause button' also does pause the timer but when resuming it again takes the time mentioned in the textbox rather than the current time value.

I guess using the value displayed in the <span> will do the work but I have not been able to find how to make it work..

Below is the code on which I am currently working

<html>
  <body>
    <input type="number" id="tb1"></br></br>
    <span id="mins">0 </span>
    <span>:</span>
    <span id="secs">0 </span></br></br>
    <button id="start" onclick="javascript:onStart()">start</button>
    <button id="pause" onclick="javascript:onPause()">pause</button>
    <button id="stop" onclick="javascript:onStop()">stop</button>
  </body>
</html>

.js

var mintb;
var mins;
var secs=0;
var inter;

function onStart(){
  mintb = document.getElementById("tb1").value;
  mins=parseInt(mintb);
  document.getElementById("mins").innerHTML = mins;
  inter = setInterval(timer,1000);
}

function onPause(){
  clearInterval(inter);
  console.log(mins);
  console.log(secs);
  
}

function onStop(){
  clearInterval(inter);
   mins=0;
   secs=0;
   document.getElementById("mins").innerHTML = mins;
   document.getElementById("secs").innerHTML = secs;
   
}

function timer(){
    document.getElementById("mins").innerHTML = mins;
    document.getElementById("secs").innerHTML = secs;
    secs = secs-1;
    if(secs<0){
    secs=59;
    mins=mins-1;
    console.log(mins);
    }
  
    if(mins<0){
      clearInterval(inter);
      document.getElementById("mins").innerHTML = 00;
      document.getElementById("secs").innerHTML = 00;
    }
}

Edit: tmins was written by mistake in the last if, it is actually mins

Sanmeet · Accepted Answer · 2021-06-12 07:45:58Z

1

Your code was correct

html 

<button id="resume" onclick="javascript:onResume()">Resume</button>

Js 

function onResume(){
     inter = setInterval(timer , 1000);
}

Without changing markup

function onPause() {
  clearInterval(inter);
  let button = document.querySelector('#pause')
  button.innerText = "Resume";
  button.setAttribute('onclick', 'onResume()');
}
function onResume() {
  let button = document.querySelector('#pause')
  button.innerText = "Pause";
  button.setAttribute('onclick', 'onPause()');
  inter = setInterval(timer, 1000);
}

edited Jun 12, 2021 at 7:45

answered Jun 12, 2021 at 6:57

Sanmeet

1,4201 gold badge10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rishi N Over a year ago

So for this I have to add another button right? I was trying to do 'pause' on start itself (once paused if you click start it resumes the timer)

Sanmeet Over a year ago

You can resuse the pause button itself to use resume function... When pause function runs you can change the innerText of the pause button and use setAttritube method to change onclick event's value from onPause to onResume ! ....

Sanmeet Over a year ago

Check my answer again I updated it ... the same I was talking about !

Rishi N Over a year ago

Oh, this solved a lot of queries. Thank you.

Sanmeet Over a year ago

Welcome :-). , Also by using same logic u can hide start when timer starts and replace bit with stop and vice versa

|

Aniket K · Accepted Answer · 2021-06-12 06:44:39Z

0

clearInterval clears the interval and resets the timer to 0.

You can refer this if you want to implement play and pause functionality - https://gist.github.com/ncou/3a0a1f89c8e22416d0d607f621a948a9

answered Jun 12, 2021 at 6:44

Aniket K

4446 silver badges20 bronze badges

Collectives™ on Stack Overflow

Implementing pause in timer using html js

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related