Results 1 to 6 of 6

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

  1. #1
    Join Date
    Jun 2008

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


    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 03:43 PM.

  2. #2
    Join Date
    Mar 2010
    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"
    html xmlns="http://www.w3.org/1999/xhtml">
    script type="text/javascript">

    timeLeft 0;
    function startTimer()  {
    //check for null input hours, minutes, seconds
    if(document.getElementById("txtHours").value == ""){
    document.getElementById("txtHours").value "0";
    document.getElementById("txtMinutes").value == ""){
    document.getElementById("txtMinutes").value "0";
    document.getElementById("txtSeconds").value == ""){
    document.getElementById("txtSeconds").value "0";
    //get input hours, minutes, seconds
    var hours   parseInt(document.getElementById("txtHours").value);
    minutes parseInt(document.getElementById("txtMinutes").value);
    seconds parseInt(document.getElementById("txtSeconds").value);
    //calculate time left in seconds
    timeLeft = (hours 3600) + (minutes 60) + seconds;
    //start count down timer
    countDown()  {
    hoursLeft   0;
    minutesLeft 0;
    secondsLeft 0;
    remainder   0;
    timeLeft timeLeft-1;
    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 {


    <!-- Table to input total time -->
     <caption style="font-weight: bold">Total Time</caption>
         <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>
    <!-- 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>
         <td id="cellHours" align="center">0</td>        
            <td id="cellMinutes" align="center">0</td>
            <td id="cellSeconds" align="center">0</td>   
    <!-- Display control buttons -->
    <table style="margin: 50 0 0 0">
             <input type="button" value="Start Timer"
                 onclick="startTimer();" /> 
             <input type="button" value="Stop Timer"
                 onclick="clearInterval(begin);" /> 

  3. #3
    Join Date
    Jun 2008
    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 06:30 PM.

  4. #4
    Join Date
    Mar 2010
    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
    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.

    $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 ()
      if (seconds < 0){
          seconds = 59
      if (minutes < 0){
          minutes = 59
      if (hours < 0){
          hours = 23
      document.getElementById("divName").innerHTML = days+" days, "+hours+" hours, "+minutes+" minutes, "+seconds+" seconds";
      setTimeout ( "runIt()", 1000 );
    <body onload="runIt();">
    <div id="divName">

    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
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <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(),
    	var done = false;
    	function init(){
    		var currDate = new Date();
    		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);	
    <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;}
    		<div class="timer_header">Bid time remaining:</div>
    		<div class="timer_countdown" id="display"></div>

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