Can anyone show me how to add "days" to this code?

[man5]

I have this js code that works great.  Now the new option I would like to add is the "days". Right now it's only based on hours, mins, seconds.  Can you show me how you would add the "days" option to it?

function Timer(container, timeLeft) {
  // get hour, minute and second element using jQuery selector
  var hoursContainer = $(container).find('.hour');
  var minsContainer  = $(container).find('.min');
  var secsContainer  = $(container).find('.sec');
   
  // hold time left
  var currentTimeLeft = timeLeft;
  // 1 second = 1000 ms
  var secondsForTimer = 1000;  
  // hold ID value return by setInterval()
  var timerInterval;
  
  // call setInteval() only when timeLeft is greater than 0
  if (currentTimeLeft == 0) {
	  return;
  } else {
	  //Call setInterval()function and store ID value to timerInterval. 
	  timerInterval = setInterval(countdown, secondsForTimer);
  }
  
  //function being passed to setInterval()
  function countdown() {
    currentTimeLeft = parseInt(currentTimeLeft - secondsForTimer);    
    if (currentTimeLeft == 0) {
       //stop calling countdown function by calling clearInterval()
       clearInterval(timerInterval);
       return;
    } else {    	
       //calculate hours left
       var wholeSeconds = parseInt(currentTimeLeft / 1000,10);
       var wholeMinutes = parseInt(currentTimeLeft / 60000,10);
       var wholeHours   = parseInt(wholeMinutes / 60,10);
       //calculate minutes left
       var minutes = parseInt(wholeMinutes % 60,10);
       //calculate seconds left
       var seconds = parseInt(wholeSeconds % 60,10);
       //prefix 0 to hour, min and second counter
       $(hoursContainer).text((wholeHours < 10 ? "0" : "") + wholeHours + (wholeHours <=0 ? " hr" : " hrs"));
       $(minsContainer).text((minutes < 10 ? "0" : "") + minutes  + (minutes <=0 ? " min" : " mins"));
       $(secsContainer).text((seconds < 10 ? "0" : "") + seconds  + (seconds <=0 ? " sec" : " secs"));
    }
  }
}

Thanks.

[man5]

Here is the html/php code.

<?php 

// db query here to get the expiry time from the database
foreach($results as $k => $row) {

  $expiry_date	  	=	$row['expiry_date'];

  $timeLeft = (strtotime($expiry_date) - time()) * 1000; 
  $counterName = "counter_$k";

  ?>
  <div class="counter <?php echo $counterName; ?>">	
    <span class="hour">00</span>
    <span class="min">00</span>
    <span class="sec">00</span>
  </div>

  <script>

    // initiate new timer
    var timer = new Timer($('.<?php echo $counterName; ?>'), <?php echo $timeLeft; ?>);

  </script>

<?php
}

?>

[requinix]

Should be pretty straightforward: take the lines that deal with hours/minutes/seconds, create a duplicate fourth line for the hours, and make sure you get the math right.

 

Example 1:

<span class="hour">00</span>
<span class="min">00</span>
<span class="sec">00</span>

becomes

<span class="day">00</span>
<span class="hour">00</span>
<span class="min">00</span>
<span class="sec">00</span>

Example 2:

var hoursContainer = $(container).find('.hour');
var minsContainer  = $(container).find('.min');
var secsContainer  = $(container).find('.sec');

becomes

var daysContainer  = $(container).find('.day');
var hoursContainer = $(container).find('.hour');
var minsContainer  = $(container).find('.min');
var secsContainer  = $(container).find('.sec');

Go ahead and give it a shot. If you have problem, post the code you have and a description of what's going wrong.

[man5]

Should be pretty straightforward: take the lines that deal with hours/minutes/seconds, create a duplicate fourth line for the hours, and make sure you get the math right.

 

Example 1:

<span class="hour">00</span>
<span class="min">00</span>
<span class="sec">00</span>

becomes

<span class="day">00</span>
<span class="hour">00</span>
<span class="min">00</span>
<span class="sec">00</span>

Example 2:

var hoursContainer = $(container).find('.hour');
var minsContainer  = $(container).find('.min');
var secsContainer  = $(container).find('.sec');

becomes

var daysContainer  = $(container).find('.day');
var hoursContainer = $(container).find('.hour');
var minsContainer  = $(container).find('.min');
var secsContainer  = $(container).find('.sec');

Go ahead and give it a shot. If you have problem, post the code you have and a description of what's going wrong.

 

 

 

I did that and the days stay at 00. As you can see, my "$timeLeft" variable == hours only.  So those hours have to somehow be converted to days if they go past 24 hours.

 

I found another counter that includes the days.  It works perfectly, except it always adds extra "6 hours" on top of my time.  Which is weird. Can't figure out why. This is the one.

http://trulycode.com/bytes/easy-countdown-to-date-with-javascript-jquery/

Edited November 14, 2015 by man5

[requinix]

I did that and the days stay at 00.

Okay, you got the "and a description of what's going wrong" part but you forgot about the "post the code you have".

 

As you can see, my "$timeLeft" variable == hours only.

No, that's milliseconds.

 

I found another counter that includes the days.  It works perfectly, except it always adds extra "6 hours" on top of my time.  Which is weird. Can't figure out why.

Probably to do with timezones.

[man5]

Okay, you got the "and a description of what's going wrong" part but you forgot about the "post the code you have".

 

No, that's milliseconds.

 

Probably to do with timezones.

 

 

Ah yes, here's the new code.  Looking at it, doesn't the days also have to be added in the function countdown() at the bottom?

function Timer(container, timeLeft) {
  // get hour, minute and second element using jQuery selector
  var daysContainer  = $(container).find('.day');
  var hoursContainer = $(container).find('.hour');
  var minsContainer  = $(container).find('.min');
  var secsContainer  = $(container).find('.sec');
   
  // hold time left
  var currentTimeLeft = timeLeft;
  // 1 second = 1000 ms
  var secondsForTimer = 1000;  
  // hold ID value return by setInterval()
  var timerInterval;
  
  // call setInteval() only when timeLeft is greater than 0
  if (currentTimeLeft == 0) {
	  return;
  } else {
	  //Call setInterval()function and store ID value to timerInterval. 
	  timerInterval = setInterval(countdown, secondsForTimer);
  }
  
  //function being passed to setInterval()
  function countdown() {
    currentTimeLeft = parseInt(currentTimeLeft - secondsForTimer);    
    if (currentTimeLeft == 0) {
       //stop calling countdown function by calling clearInterval()
       clearInterval(timerInterval);
       return;
    } else {    	
       //calculate hours left
       var wholeSeconds = parseInt(currentTimeLeft / 1000,10);
       var wholeMinutes = parseInt(currentTimeLeft / 60000,10);
       var wholeHours   = parseInt(wholeMinutes / 60,10);
       //calculate minutes left
       var minutes = parseInt(wholeMinutes % 60,10);
       //calculate seconds left
       var seconds = parseInt(wholeSeconds % 60,10);
       //prefix 0 to hour, min and second counter
       $(hoursContainer).text((wholeHours < 10 ? "0" : "") + wholeHours + (wholeHours <=0 ? " hr" : " hrs"));
       $(minsContainer).text((minutes < 10 ? "0" : "") + minutes  + (minutes <=0 ? " min" : " mins"));
       $(secsContainer).text((seconds < 10 ? "0" : "") + seconds  + (seconds <=0 ? " sec" : " secs"));
    }
  }
}

[man5]

Here's the above js code I updated.  I now included the additional hours and days in the function.   This does show the days but it also shows the total hours as well.

 

For eg. 

 

Original code shows: 48 hours 5 mins 10 seconds

New code shows: 2 days 48 hours 5 mins 10 seconds

function Timer(container, timeLeft) {
  // get hour, minute and second element using jQuery selector
  var daysContainer  = $(container).find('.day');
  var hoursContainer = $(container).find('.hour');
  var minsContainer  = $(container).find('.min');
  var secsContainer  = $(container).find('.sec');
   
  // hold time left
  var currentTimeLeft = timeLeft;
  // 1 second = 1000 ms
  var secondsForTimer = 1000;  
  // hold ID value return by setInterval()
  var timerInterval;
  
  // call setInteval() only when timeLeft is greater than 0
  if (currentTimeLeft == 0) {
	  return;
  } else {
	  //Call setInterval()function and store ID value to timerInterval. 
	  timerInterval = setInterval(countdown, secondsForTimer);
  }
  
  //function being passed to setInterval()
  function countdown() {
    currentTimeLeft = parseInt(currentTimeLeft - secondsForTimer);    
    if (currentTimeLeft == 0) {
       //stop calling countdown function by calling clearInterval()
       clearInterval(timerInterval);
       return;
    } else {    	
       //calculate hours left
       var wholeSeconds = parseInt(currentTimeLeft / 1000,10);
       var wholeMinutes = parseInt(currentTimeLeft / 60000,10);
       var wholeHours   = parseInt(wholeMinutes / 60,10);
	   
	   // NEW ADDED
	   var wholeDays   = parseInt(wholeHours / 24,10);
	   
	    //calculate hours left NEW ADDED
       var hours = parseInt(wholeHours % 24,10);
	   
       //calculate minutes left
       var minutes = parseInt(wholeMinutes % 60,10);
       //calculate seconds left
       var seconds = parseInt(wholeSeconds % 60,10);
       //prefix 0 to hour, min and second counter
	   $(daysContainer).text((wholeDays < 10 ? "0" : "") + wholeDays + (wholeDays <=0 ? " day" : " days"));
       $(hoursContainer).text((wholeHours < 10 ? "0" : "") + wholeHours + (wholeHours <=0 ? " hr" : " hrs"));
       $(minsContainer).text((minutes < 10 ? "0" : "") + minutes  + (minutes <=0 ? " min" : " mins"));
       $(secsContainer).text((seconds < 10 ? "0" : "") + seconds  + (seconds <=0 ? " sec" : " secs"));
    }
  }
}

[man5]

So I have it finally working.  Someone else helped me out.   There was a small mistake in the above code. 

 

Here is the full working code.

function Timer(container, timeLeft) {
  // get hour, minute and second element using jQuery selector
  var daysContainer = $(container).find('.day');
  var hoursContainer = $(container).find('.hour');
  var minsContainer  = $(container).find('.min');
  var secsContainer  = $(container).find('.sec');

  // hold time left
  var currentTimeLeft = timeLeft;
  // 1 second = 1000 ms
  var secondsForTimer = 1000;  
  // hold ID value return by setInterval()
  var timerInterval;

  // call setInteval() only when timeLeft is greater than 0
  if (currentTimeLeft == 0) {
      return;
  } else {
      //Call setInterval()function and store ID value to timerInterval. 
      timerInterval = setInterval(countdown, secondsForTimer);
  }

  //function being passed to setInterval()
  function countdown() {
    currentTimeLeft = parseInt(currentTimeLeft - secondsForTimer);    
    if (currentTimeLeft == 0) {
       //stop calling countdown function by calling clearInterval()
       clearInterval(timerInterval);
       return;
    } else {        
       //calculate hours left
       var wholeSeconds = parseInt(currentTimeLeft / 1000,10);
       var wholeMinutes = parseInt(currentTimeLeft / 60000,10);
       var wholeHours   = parseInt(wholeMinutes / 60,10);
       var wholeDays   = parseInt(wholeHours / 24,10);
       //calculate hours left
       var hours = parseInt(wholeHours % 24,10);
       //calculate minutes left
       var minutes = parseInt(wholeMinutes % 60,10);
       //calculate seconds left
       var seconds = parseInt(wholeSeconds % 60,10);
       //prefix 0 to hour, min and second counter
       $(daysContainer).text((wholeDays < 10 ? "0" : "") + wholeDays + (wholeDays <=0 ? " day" : " days"));
       $(hoursContainer).text((hours < 10 ? "0" : "") + hours + (hours <=0 ? " hr" : " hrs"));
       $(minsContainer).text((minutes < 10 ? "0" : "") + minutes  + (minutes <=0 ? " min" : " mins"));
       $(secsContainer).text((seconds < 10 ? "0" : "") + seconds  + (seconds <=0 ? " sec" : " secs"));
    }
  }
}