Jump to content
Sign in to follow this  
man5

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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
}

?>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by man5

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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"));
    }
  }
}

Share this post


Link to post
Share on other sites

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"));
    }
  }
}

Share this post


Link to post
Share on other sites

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"));
    }
  }
}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.