How to display multiple javascript countdown timers

Question

I want to display multiple timers most likely 3 or 4 in one function and display them all in different divs. This works but displays the same countdown timer in both divs.

var countDownDate = new Date("Sep 15, 2017 12:25:25").getTime();
var countDownDate = new Date("Sep 19, 2017 12:25:25").getTime();



var x = setInterval(function() {


var now = new Date().getTime();


var distance = countDownDate - now;


var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);


document.getElementById("timer").innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours + "h " + minutes + "m " + seconds + "s ";
document.getElementById("timer2").innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours + "h " + minutes + "m " + seconds + "s ";



if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "ICO Has Ended";
}
}, 1000);

You are declaring the variable countDownDate twice, so your first date is being overwritten with the second date. You need to create a distinct, second countDownDate (countDownDateTwo for instance) and apply all the same code you have to that variable as well, so that you have distinct hours, minutes, and seconds variables. I would abstract all the code you have into a function so that you don't need to repeat yourself so much — Robbie Milejczak
– Robbie Milejczak, Commented Sep 18, 2017 at 19:41

treeseal7 · Accepted Answer · 2017-09-18 20:55:40Z

2

you need to declare 2 separate variables for the dates, these are currently overwriting each other.

then you need to call the interval timer for each date, so would be most efficient to wrap in a function - see below, this should work

var countDownDate1 = new Date("Sep 15, 2017 12:25:25").getTime();
var countDownDate2 = new Date("Sep 19, 2017 12:25:25").getTime();

var timer1= document.getElementById("timer")
var timer2= document.getElementById("timer2")

function countdown(finish_date, timer){

    var x = setInterval(function() {

                    var now = new Date().getTime();

                    var distance = finish_date - now;

                    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

                    timer.innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours + "h " + minutes + "m " + seconds + "s ";


                    if (distance < 0) {
                    clearInterval(x);
                    timer.innerHTML = "ICO Has Ended";
                    }
                    }, 1000);
}

countdown(countDownDate1, timer1)
countdown(countDownDate2, timer2)

JSfiddle link : https://jsfiddle.net/mpwaw/j95x8y86/

edited Sep 18, 2017 at 20:55

answered Sep 18, 2017 at 19:52

treeseal7

74910 silver badges25 bronze badges

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

5 Comments

atlas24 Over a year ago

I don't understand this would still only call one timer because the innerhtml will still display the same days hours minutes and seconds. It's just wrapped in a function and still leaves me with the same problem. Also I don't understand what the last two lines of code do?

treeseal7 Over a year ago

sorry, forgot to edit that part... if you declare the timers separately outside the function and then just pass in the timer with the function then this should work properly now. did that work?

treeseal7 Over a year ago

the last 2 lines of code are just simply calling the function that is defined above, hence calling it twice with the different values

treeseal7 Over a year ago

check out the jsfiddle link

treeseal7 Over a year ago

cool, if it answered your question then please remember to accept the answer with the tick

Sari Rahal · Accepted Answer · 2017-09-18 19:51:45Z

You only have one variable for countDownDate and you're overwriting the original.

var countDownDate = new Date("Sep 15, 2017 12:25:25").getTime();
var countDownDate = new Date("Sep 19, 2017 12:25:25").getTime();

Right here you have a countDownDate that is a date of "Sep 19, 2017 12:25:25". You will wont to create 2 different variables.

try changing the second countDownDate to countDownDate2 and follow suit in the rest of your code.

var countDownDate1 = new Date("Sep 15, 2017 12:25:25").getTime();
var countDownDate2 = new Date("Sep 19, 2017 12:25:25").getTime();

var x = setInterval(function() {
    var now = new Date().getTime();
    var distance1 = countDownDate1 - now;
    var distance2 = countDownDate2 - now;


    var days1 = Math.floor(distance1 / (1000 * 60 * 60 * 24));
    var hours1 = Math.floor((distance1 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes1 = Math.floor((distance1 % (1000 * 60 * 60)) / (1000 * 60));
    var seconds1 = Math.floor((distance1 % (1000 * 60)) / 1000);

    var days2 = Math.floor(distance2 / (1000 * 60 * 60 * 24));
    var hours2 = Math.floor((distance2 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes2 = Math.floor((distance2 % (1000 * 60 * 60)) / (1000 * 60));
    var seconds2 = Math.floor((distance2 % (1000 * 60)) / 1000);

    document.getElementById("timer").innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours1 + "h " + minutes1 + "m " + seconds1 + "s ";
    document.getElementById("timer2").innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours2 + "h " + minutes2 + "m " + seconds2 + "s ";

 if (distance < 0) {
   clearInterval(x);
   document.getElementById("timer").innerHTML = "ICO Has Ended";
 }
 }, 1000);

With this code above, I would look to refactoring this into multiple functions. Currenlty this function is considered overloaded and should be broken into smaller. Maybe break out the get intervals into a different function where you send it the 2 dates, and it returns the H,M,S.

Jonas Wilms · Accepted Answer · 2017-09-18 19:49:57Z

0

Extract the whole thing into a function:

 function setTimer(enddate, elem){
   (function tick() {
      var now = new Date().getTime();
      var distance = enddate - now;
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
     var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
     var seconds = Math.floor((distance % (1000 * 60)) / 1000);


     elem.innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours + "h " + minutes + "m " + seconds + "s ";

    if(distance < 0){
     elem.innerHTML = "ICO Has Ended";
    }else{
     setTimeout(tick,1000);
   }
  })()
}

So one can do:

 setTimer(
  new Date("Sep 19, 2017 12:25:25"),
  document.getElementById(" timer1")
 );
setTimer(
  new Date("Sep 21, 2017 12:25:25"),
  document.getElementById(" timer2")
 );

answered Sep 18, 2017 at 19:49

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

2 Comments

atlas24 Over a year ago

Okay this makes sense, So it pulls each date from new date which would give a dif distance? What is elem.innerHTML? Where do the setTimer functions fit in the code block?

Jonas Wilms Over a year ago

@atlas24 1) i dont get you 2) its the innerHTML property of the passed elem? 3) put it somewhere it doesnt matter.

JSingh · Accepted Answer · 2017-09-18 20:14:33Z

var count1Div = document.getElementById('count1');
var count2Div = document.getElementById('count2');
var count3Div = document.getElementById('count3');

function appendZero(num) {
 return num < 10 ? "0"+num : num;
}

function setCountContent(element, count) {
var min = count.getMinutes();
var sec = count.getSeconds();
var hour = count.getHours();

element.innerText = appendZero(hour) + " : " + appendZero(min) + " : " + appendZero(sec);
}

var interval = setInterval(function(e){
var count = new Date();
var count2 = new Date();
var count3 = new Date();

count2.setMinutes(count.getMinutes() + 1);
count3.setMinutes(count2.getMinutes() + 1);

setCountContent(count1Div, count);
setCountContent(count2Div, count2);
setCountContent(count3Div, count3);

// it will stop when minutes are equal to 13
if (count.getMinutes() == 13) {
  clearInterval(interval);
}

}, 1000);

div{
  width: 100%;
  height: 5em;
}

<div id="count1" style="background-color: darkmagenta; color: white;"></div>
<div id="count2" style="background-color: orange; color: white;"></div>
<div id="count3" style="background-color: whitesmoke; color: black;"></div>

Here is an example

Collectives™ on Stack Overflow

How to display multiple javascript countdown timers

4 Answers 4

5 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related