JavaScript countdown timer recursive call for each day

Question

I am trying to make a countdown timer which displays the amount of time remaining for a customer to purchase in order to receive same day shipping.

For example, if they purchase before 15:30 the timer will say something like order within 30 minutes for shipping today (if it was 15:00).

However, when it reaches 15:30, I want it to say order within 23 hours and 59 minutes to receive shipping tomorrow. Then obviously when it reaches midnight it will turn to today. Alternatively it can just display the day/date so today/tomorrow won't matter.

I know I need to call the function again looking at tomorrows date but I'm not very handy with javascript so cannot figure it out.

Can someone help?

// Set the date we're counting down to
var nowDate = new Date(); 
var countDownDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 15, 30, 0, 0);

// 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 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);

  // Display the result in the element with id="demo"
  if (hours >= 1) {
   document.getElementById("shipping-countdown").innerHTML = "Order within " + hours + "h "
   + minutes + "m " + seconds + "s " + "to have your order shipped on " // date of shipment;
  }
  
  else if (hours < 1 && minutes < 1) {
   document.getElementById("shipping-countdown").innerHTML = "Order within " + seconds + "s "
    + "to have your order shipped on " // date of shipment;
  }
  
  else {
   document.getElementById("shipping-countdown").innerHTML = "Order within " +  minutes + "m " 
    + seconds + "s " + "to have your order shipped on " // date of shipment;
  }
  
  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    // Start again but looking at tomorrows date
  }
  
  // If the count down is finished, write some text 
  if (nowDate.getDay() == 0 || nowDate.getDay() == 6) {
    clearInterval(x);
    document.getElementById("shipping-countdown").innerHTML = "Order within " + days + "d " 
    + hours + "h "
   + minutes + "m " + seconds + "s " + "to have your order shipped on " // Start of the week;
  }
}, 1000);

<!-- Display the countdown timer in an element -->
<p id="shipping-countdown"></p>

Side note: on my screen, in GMT -0400 EST, the counter currently reads 5h17m to ship, which is my offset to 15h30. But is that the real shipping cut-off (_my_ time zone)? Or is it the time zone of the shipper/warehouse? If the latter, you need to account for that. — msanford, Sep 28 '17 at 14:13
@msanford this is something I have considered, but for now I just want it functioning for GMT as other timezones will have their own individual implementation. — James, Sep 28 '17 at 14:27
_"I know I need to call the function again looking at tomorrows date but I'm not very handy with javascript so cannot figure it out."_ Which function do you need to call again with a different date? — Tiago Sousa, Sep 28 '17 at 15:00

Luke Kot-Zaniewski · Answer 1 · 2017-09-28T15:12:27.683

You don't need to clear the setInterval function. Just reset the new target date while keeping it alive. You also had some issues with the countdown going into the negatives which I fixed by moving the distance check and resetting the distance if it is under 1 second.

    // Set the date we're counting down to
    var nowDate = new Date(); 
    var countDownDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 11, 2, 50, 0);
    // 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;

      if (distance < 1) {
        countDownDate = countDownDate.setDate(countDownDate.getDate()+1);
        distance = countDownDate - now;
      }
      
      // Time calculations for 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);

      // Display the result in the element with id="demo"
      if (hours >= 1) {
       document.getElementById("shipping-countdown").innerHTML = "Order within " + hours + "h "
       + minutes + "m " + seconds + "s " + "to have your order shipped on " // date of shipment;
      }
      
      else if (hours < 1 && minutes < 1) {
       document.getElementById("shipping-countdown").innerHTML = "Order within " + seconds + "s "
        + "to have your order shipped on " // date of shipment;
      }
      
      else {
       document.getElementById("shipping-countdown").innerHTML = "Order within " +  minutes + "m " 
        + seconds + "s " + "to have your order shipped on " // date of shipment;
      }
      
      // If the count down is finished, write some text 
      if (nowDate.getDay() == 0 || nowDate.getDay() == 6) {
        clearInterval(x);
        document.getElementById("shipping-countdown").innerHTML = "Order within " + days + "d " 
        + hours + "h "
       + minutes + "m " + seconds + "s " + "to have your order shipped on " // Start of the week;
      }
    }, 1000);

<!-- Display the countdown timer in an element -->
<p id="shipping-countdown"></p>

score 0 · Answer 2 · answered Sep 28 '17 at 15:13

I have managed to achieve this with the following code, figured out I was along the wrong lines and could simply just adjust the countDownDate variable.

// Set the date we're counting down to
var nowDate = new Date(); 
var countDownDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 15, 30, 0, 0);

// 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 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);
  
    // If the count down is finished, write some text 
  if (countDownDate.getDay() == 6) {
    countDownDate.setDate(countDownDate.getDate()+2);
  }

  if (days >= 1) {
   document.getElementById("shipping-countdown").innerHTML = "Order within " + days + "d " + hours + "h "
   + minutes + "m " + seconds + "s " + "to have your order shipped on " + countDownDate;
  }
  
  else if (hours >= 1) {
   document.getElementById("shipping-countdown").innerHTML = "Order within " + hours + "h "
   + minutes + "m " + seconds + "s " + "to have your order shipped on " + countDownDate.getDate() + "/" 
    + (countDownDate.getMonth()+1) + "/" + countDownDate.getFullYear();
  }
  
  else if (minutes >= 1) {
   document.getElementById("shipping-countdown").innerHTML = "Order within " + minutes + "m " + seconds + "s "
     + "to have your order shipped on " + countDownDate.getDate() + "/" 
    + (countDownDate.getMonth()+1) + "/" + countDownDate.getFullYear();
  }
  
  else {
   document.getElementById("shipping-countdown").innerHTML = "Order within " + seconds + "s "
    + "to have your order shipped on " + countDownDate.getDate() + "/" 
    + (countDownDate.getMonth()+1) + "/" + countDownDate.getFullYear();
  }
  
  // If the count down is finished
  if (distance < 0) {
    countDownDate.setDate(countDownDate.getDate()+1);
  }
  
}, 1000);

<!-- Display the countdown timer in an element -->
<p id="shipping-countdown"></p>

@LucasKot-Zaniewski no, perhaps I should change it to 1 as opposed to 0. — James, Sep 29 '17 at 08:18

JavaScript countdown timer recursive call for each day

2 Answers2