1

I have this Javascript count down timer that works perfectly. Only problem is i can use it for only one time in one page. I want to use it multiple times.

I think script use id ="timer" that is why i am not able to use it multiple times.

Below is the JS code:

<script>
var startTime = 60; //in Minutes
var doneClass = "done"; //optional styling applied to text when timer is done
var space = '       ';

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  var intervalLoop = setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = "00" + space + minutes + space + seconds;
    if (--timer < 0) {
      document.querySelector("#timer").classList.add(doneClass);
      clearInterval(intervalLoop);
    }
  }, 1000);
}

window.onload = function() {
  var now = new Date();
  var hrs = now.getHours();
  var setMinutes = 60 * (startTime - now.getMinutes() - (now.getSeconds() / 100)),
    display = document.querySelector("#timer");

  startTimer(setMinutes, display);
};
</script>
Sahibjot Singh
  • 1,331
  • 3
  • 12
  • 19
  • 1
    So what is your coding issue? A good start is to put the global variables into functions. Consider using a constructor to create instances, or closures to keep variables "private" per call to the timer. – RobG Jun 06 '17 at 11:46
  • Yep, wrap timer related stuff in function - thats the solution. make it like a prototype, so you could make instances of it – DanilGholtsman Jun 06 '17 at 11:49
  • @RobG Judging from his code and his question, I'm not sure OP is at this coding level right now. – Jeremy Thille Jun 06 '17 at 11:50
  • @RobG I am beginner in Javascript so not completely aware of the variables in function or outside function. Could you please tweak the code to show what could work ? – Sahibjot Singh Jun 06 '17 at 11:54

3 Answers3

0

Just declare intervalLoop outside of the startTimer function, it'll be available globally.

var intervalLoop = null

function startTimer(duration, display) {
  intervalLoop = setInterval(function() { .... }
})


function stopTimer() {
  clearInterval(intervalLoop) // Also available here!
})
Jeremy Thille
  • 26,047
  • 12
  • 43
  • 63
0
window.setInterval(function(){ Your function }, 1000);

Here 1000 means timer 1 sec

Janen R
  • 729
  • 10
  • 21
0

I think something like this could be helpful:

Timer object declaration

var timerObject = function(){
 this.startTime = 60; //in Minutes
 this.doneClass = "done"; //optional styling applied to text when timer is done
 this.space = '       ';

  return this;
};

timerObject.prototype.startTimer = function(duration, display) {
  var me = this, 
    timer = duration,
    minutes, seconds;
  var intervalLoop = setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = "00" + me.space + minutes + me.space + seconds;
    if (--timer < 0) {
      // not sure about this part, because of selectors
      document.querySelector("#timer").classList.add(me.doneClass);
      clearInterval(intervalLoop);
    }
  }, 1000);
}

Use it like 

var t1 = new timerObject();
var t2 = new timerObject();
t1.startTimer(a,b);
t2.startTimer(a,b);

JS Fiddle example:

UPD1 commented part so the the timer could be stopped

https://jsfiddle.net/9fjwsath/1/

DanilGholtsman
  • 2,354
  • 4
  • 38
  • 69