Need a simple countdown clock - input in seconds - output d,h,m,s

**peppy** · 07-20-2010 03:38 PM

Greetings,

All I need is a simple countdown clock where I can input a random total number of seconds from a variable and it will display a countdown containing days, hours, minutes and seconds.

For example:

input: 95500 seconds
Output: 1d 2h 31m 40s

I would like this to be like a live "ticker" so the clock goes down without having to reload the page.

Let me know if this can be done.

**tirna** · 07-20-2010 05:40 PM

Maybe use this count down timer as a guide.

It will need only a few minor tweaks to customise it to how you want.

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Timer</title>
<script type="text/javascript">
<!--

 var timeLeft = 0;
    var begin
    
    function startTimer()  {
    //check for null input hours, minutes, seconds
   if(document.getElementById("txtHours").value == ""){
      document.getElementById("txtHours").value = "0";
   }
   
   if(document.getElementById("txtMinutes").value == ""){
      document.getElementById("txtMinutes").value = "0";
   }
   
   if(document.getElementById("txtSeconds").value == ""){
      document.getElementById("txtSeconds").value = "0";
   }
   
   //get input hours, minutes, seconds
   var hours   = parseInt(document.getElementById("txtHours").value);
   var minutes = parseInt(document.getElementById("txtMinutes").value);
   var seconds = parseInt(document.getElementById("txtSeconds").value);
   
   //calculate time left in seconds
   timeLeft = (hours * 3600) + (minutes * 60) + seconds;
   
      //start count down timer
      begin=setInterval("countDown()",1000);
    }
    
    function countDown()  {
    var hoursLeft   = 0;
   var minutesLeft = 0;
   var secondsLeft = 0;
   var remainder   = 0;
   
     timeLeft = timeLeft-1;
        
        if(timeLeft >= 0){
       //break down time left into hours, minutes, seconds
      hoursLeft = Math.floor(timeLeft/3600);
      remainder = timeLeft%3600;
      
      minutesLeft = Math.floor(remainder/60);
      remainder   = remainder%60;
      
      secondsLeft = remainder;
                 document.getElementById('cellHours').innerHTML = hoursLeft;
     document.getElementById('cellMinutes').innerHTML = minutesLeft;
     document.getElementById('cellSeconds').innerHTML = secondsLeft;    
        } else {
         clearInterval(begin);
        }       
    }

//-->
</script>

</head>
<body>
<form>
<!-- Table to input total time -->
<table>
 <caption style="font-weight: bold">Total Time</caption>
 <th>Hours</th>
 <th>Minutes</th>
 <th>Seconds</th>
 <tr>
     <td><input type="text" id="txtHours" value="0" size="5" /></td>
    <td><input type="text" id="txtMinutes" value="0" size="5" /></td>
    <td><input type="text" id="txtSeconds" value="0" size="5" /></td>
 </tr>   
</table>
<!-- Table to output time left -->
<table name="tblTimer" id="tblTimer" width="500px" style="margin: 70 0 0 0" border="1">
 <caption style="font-weight: bold">Time Left</caption>
 <th>Hours Left</th>
 <th>Minutes Left</th>
 <th>Seconds Left</th>
 <tr>
     <td id="cellHours" align="center">0</td>        
        <td id="cellMinutes" align="center">0</td>
        <td id="cellSeconds" align="center">0</td>   
    </tr>
</table>
<!-- Display control buttons -->
<table style="margin: 50 0 0 0">
    <tr>
     <td>
         <input type="button" value="Start Timer"
             onclick="startTimer();" /> 
        </td>
        <td>
         <input type="button" value="Stop Timer"
             onclick="clearInterval(begin);" /> 
        </td>
    </tr>
</table>
</form>
</body>
</html>

**peppy** · 07-20-2010 06:28 PM

Thanks for the response. Unfortunately, I was working on this example earlier when I found it at Google, but it seemed a bit complicated.

Basically, I wanted to get an auction style clock.

I already have a random "end time" stored in the database for a particular product on sale. Then I convert that number to Unix time and subtract the current Unix time from it to come up with a time difference in seconds and store it as a variable. This is how far I've gotten.

Next I would like to use this variable in seconds in a plain old live-ticker that runs down in the proper format of (d,h,m,s)

It sounds ridiculously easy but it has been taking me all day to do and there is nothing like it on Google that I could find either.

**tirna** · 07-20-2010 06:44 PM

ok, no problem.

The code I posted does most of what you need.

1) assign your random end time in seconds to the javascript variable timeLeft

2) In the countDown(), where the time left is broken down in hours, minutes and seconds, add a block of code to first break it down to the number of days left. The block of code will be very similar to that which breaks it down into hours.

3) Ignore the html in my code that displays the time on the screen and display the time left calculated from 2) in your own html on your web page.

**Adeee** · 07-21-2010 09:01 AM

Here you go, just change the date. Note: The time is in military time, so midnight = 00:00:00, 3 PM = 15:00:00, and so on.

Code:

<?php
$year = 2010;
$month = 7;
$day = 21;
$hour = 14;
$min = 00;
$sec = 00;

$target = mktime($hour, $min, $sec, $month, $day, $year);
$current = time();
$difference = $target - $current;

$rDay = floor($difference/60/60/24);
$rHour = floor(($difference-($rDay*60*60*24))/60/60);
$rMin = floor(($difference-($rDay*60*60*24)-$rHour*60*60))/60;
$rSec = floor(($difference-($rDay*60*60*24)-($rHour*60*60))-($rMin*60));
?>



<script type="text/javascript">
  var days = <?php echo $rDay; ?>  
  var hours = <?php echo $rHour; ?>  
  var minutes = <?php echo $rMin; ?>  
  var seconds = <?php echo $rSec; ?>  

function runIt ()
{
  seconds--;
  if (seconds < 0){
      minutes--;
      seconds = 59
  }
  if (minutes < 0){
      hours--;
      minutes = 59
  }
  if (hours < 0){
      days--;
      hours = 23
  }
  document.getElementById("divName").innerHTML = days+" days, "+hours+" hours, "+minutes+" minutes, "+seconds+" seconds";
  setTimeout ( "runIt()", 1000 );
  
}
</script>

<body onload="runIt();">


<div id="divName">

</div>
</body>

Also, you can change the part after the closing script tag, but you need to put [code]onLoad="runIt();"[/script] into your opening body tag for it to work.

**Westerly** · 07-21-2010 10:42 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

	var nIndex = 3024000;   // 35 days, in seconds;	
	var GMToffset = -4;     // your current GMT offset; 
	var refDate = new Date("July 21, 2010 12:00:00");  // start date;


	refDate = new Date(refDate.getFullYear(),
			   refDate.getMonth(),
			   refDate.getDate(),
			   refDate.getHours(),
			   refDate.getMinutes(),
			   refDate.getSeconds()+nIndex,
			   0);	
	var done = false;
		
	function init(){

		var currDate = new Date();
		currDate.setHours(GMToffset+currDate.getHours()+currDate.getTimezoneOffset()/60);	
		if (refDate < currDate)
			{
			 document.getElementById('display').innerHTML = "This auction is closed.";
			 done = true;
			}
		var remTime = refDate-currDate;
		var nDays = parseInt(remTime/86400000);
		var nHours = parseInt((remTime-(nDays*86400000))/3600000);		
		var nMin = parseInt((remTime-(nDays*86400000)-(nHours*3600000))/60000);
		var nSec = 0;
		if (refDate > currDate)
			{
			 nSec = 60-(currDate.getSeconds());
			}
		else 	{
			 nSec = currDate.getSeconds();
			}
		var nMonths = parseInt(nDays/30);
		var rDays = parseInt(nDays-(nMonths*30));		
		if (!done)
			{
			 setTimeout("init()", 1000);
			 document.getElementById('display').innerHTML = nMonths + " Months, " + rDays +
									" Days, " + nHours + " Hours, " + nMin + " Minutes, " + nSec + " Seconds";
			}
	}

	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

</script>
<style type="text/css">

	 body {background-color: #eae3c6; margin-top: 60px;}	
	.timer_header {width: 460px; margin-left: auto; margin-right: auto; 
		margin-bottom: 10px; text-align: center; font-family: 'times new roman';
		font-size: 12pt; color: #00008b; background-color: #87ceeb;
		padding-top: 3px; font-weight: bold;}
	
	.timer_countdown {width: 460px; margin-left: auto; margin-right: auto; 
		margin-top: -10px; text-align: center; font-family: 'times new roman';
		font-size: 12pt; color: #00008b; background-color: #87ceeb;
		padding-bottom: 3px;}
</style>
</head>
	<body>
		<div class="timer_header">Bid time remaining:</div>
		<div class="timer_countdown" id="display"></div>
	</body>
</html>

Thread: Need a simple countdown clock - input in seconds - output d,h,m,s

Thread Tools

Display

Need a simple countdown clock - input in seconds - output d,h,m,s

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions