Change single to multiple countdown timer Using Javascript

Question

Hi guys I have problem with my timer , single timer is working fine but when I convert it into multiple timer, timer is not working can someone help me please thank you

I added a single timer snippet that is working Thanks in Advance! :)

P.S I cannot use Jquery on this part so it is quite challenging.

// value came here $time_end = sprintf('%013.0f', microtime(true)*1000 + 27000000); 30 minuts timer
var countDownDate = "1506509439553";

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  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);

  // Output the result in an element with id="demo"
  document.getElementById("timer_1").innerHTML = minutes + ":" + seconds + "";
  //id is dynamic timer_<?php echo get_the_ID();?>

  // If the count down is over, write some text 
  if (distance <= 0) {
    clearInterval(x);
    document.getElementById("timer_1").style.display = "none";
  }
}, 1000);

<div id="timer_1"></div>

Use some closures?

evolutionxbox
– evolutionxbox

2017-09-27 08:27:29 +00:00
Commented Sep 27, 2017 at 8:27 — evolutionxbox
– evolutionxbox, Commented Sep 27, 2017 at 8:27

gurvinder372 · Accepted Answer · 2017-09-27 07:45:43Z

1

Simply wrap your existing code into a method, and pass the element id to it.

Demo

startTimer( "timer_1" );
startTimer( "timer_2" );
startTimer( "timer_3" );

function startTimer(elementId) {
  // value came here $time_end = sprintf('%013.0f', microtime(true)*1000 + 27000000); 30 minuts timer
  var countDownDate = "1506509439553";

  // Update the count down every 1 second
  var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    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);

    // Output the result in an element with id="demo"
    document.getElementById( elementId ).innerHTML = minutes + ":" + seconds + "";
    //id is dynamic timer_<?php echo get_the_ID();?>

    // If the count down is over, write some text 
    if (distance <= 0) {
      clearInterval(x);
      document.getElementById( elementId ).style.display = "none";
    }
  }, 1000);
}

<div id="timer_1"></div>
<div id="timer_2"></div>
<div id="timer_3"></div>

answered Sep 27, 2017 at 7:45

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

3 Comments

Bartheleway Over a year ago

I think putting the countDownDate as a parameter is also a good practice :)

Christian Read Over a year ago

oh boy thank you so much I spent a lot of time working on this thank you @gurvinder372

gurvinder372 Over a year ago

@Bartheleway yes, I think this code can be refactored/designed to improve its readability.

Collectives™ on Stack Overflow

Change single to multiple countdown timer Using Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related