www.webdeveloper.com
Results 1 to 8 of 8

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

  1. #1
    Join Date
    Jun 2008
    Posts
    13

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

    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.
    Last edited by peppy; 07-20-2010 at 04:43 PM.

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    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> 

  3. #3
    Join Date
    Jun 2008
    Posts
    13
    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.
    Last edited by peppy; 07-20-2010 at 07:30 PM.

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    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.



  5. #5
    Join Date
    Jul 2010
    Posts
    7
    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.

  6. #6
    Join Date
    May 2010
    Posts
    109
    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>

  7. #7
    Join Date
    Oct 2014
    Posts
    1

    Typo in $rMin

    Quote Originally Posted by Adeee View Post
    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.
    This code results in fractions of a minute being displayed as a decimal number. Quick fix, move the /60 at the end of $rMin inside of the floor() function:

    Incorrect:
    PHP Code:
    $rMin floor(($difference-($rDay*60*60*24)-$rHour*60*60))/60
    Correct:
    PHP Code:
    $rMin floor(($difference-($rDay*60*60*24)-$rHour*60*60)/60); 

  8. #8
    Join Date
    Jun 2014
    Posts
    48
    Quote Originally Posted by Adeee View Post
    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.
    Your codes works perfectly and it also helped me in count down time.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles