count down clock

now = 2011-12-28T12:57:59-05:00

end = 2011-12-28T16:57:59-05:00

if i have two ver with the time in that format how do i have a count down clock ?

i found this

http://keith-wood.name/countdown.html

I like some of the clocks but how can i make it count down using the Now and End time format ?
mikearmasAsked:
Who is Participating?
 
Ray PaseurCommented:
Once you get it out of the data base, you can get it into an easy-to-use array or JSON string with something like this.
<?php // RAY_temp_mikearmas.php
error_reporting(E_ALL);
date_default_timezone_set('America/Chicago');

/* FROM THE POST AT EE
targetDate: {
      'month':       '12',
      'day':             '29',
      'year':       '2011',
      'hour':       '14',
      'min':             '06',
      'sec':             '14'
      }
*/

$the_date   = '2011-12-29 17:21:41';
$timestamp  = strtotime($the_date);
$date_array = array
( 'month'  => date('m', $timestamp)
, 'day'    => date('d', $timestamp)
, 'year'   => date('Y', $timestamp)
, 'hour'   => date('H', $timestamp)
, 'min'    => date('i', $timestamp)
, 'sec'    => date('s', $timestamp)
)
;

print_r(json_encode($date_array));

Open in new window

0
 
eriksmtkaCommented:
this is a Javascript.. possibly even jQuery question

having said that, he does have a reference page available.  you want to use the "format" attribute.
count down clock - reference

But it doesn't look like he has the "time zone" options... just year, month, week, day, hours, minute, seconds
0
 
mikearmasAuthor Commented:
ok i have changed the format to this

12 28 11 13:14
using this

$now = date('m d y G:i');

but i saw this

http://keith-wood.name/flightBoard.html

how can i make it count down using the flightBoard
   
$('#clock .board').flightboard({ 
    maxLength: 2, messages: [''], flips: 1, repeat: false}); 
 
// setInterval(updateClock, 1000); 
 
var lastTime = currentTime(); 
 
function updateClock() { 
    var thisTime = currentTime(); 
    for (var i = 0; i <= 4; i++) { 
        if (thisTime[i] != lastTime[i]) { 
            $('#clock' + timeNames[i] + 'Board'). 
                flightboard('change', 'messages', [lastTime[i], thisTime[i]]). 
                flightboard('flip'); 
        } 
    } 
    lastTime = thisTime; 
} 
 
function currentTime() { 
    var now = new Date(); 
    var hour = now.getHours() % 12 || 12; 
    var min = now.getMinutes(); 
    var sec = now.getSeconds(); 
    return [(hour < 10 ? '0' : '') + hour, 
        (min < 10 ? '0' : '') + min, 
        (sec < 10 ? '0' : '') + sec, 
        (now.getHours() < 12 ? 'AM' : 'PM')]; 
}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Graceful_PenguinCommented:
This should work just change the end* to the desired time.
function currentTime() { 
    var now = new Date(); 
    var endHour = 12;
    var endMin = 30;
    var endSex = 0;
    var hour = endHour - now.getHours() % 12 || 12; 
    var min = endMin - now.getMinutes(); 
    var sec = endSec - now.getSeconds(); 
    return [(hour < 10 ? '0' : '') + hour, 
        (min < 10 ? '0' : '') + min, 
        (sec < 10 ? '0' : '') + sec, 
        (now.getHours() < 12 ? 'AM' : 'PM')]; 
}

Open in new window

0
 
Graceful_PenguinCommented:
Sorry I forgot about the days
OK try this
function currentTime() 
{ 
    var now = new Date(); 
    var end = new Date('12 28 11 13:14);
    var days = end.getDays - now.getDays();
    var hour = (end.getHours() - now.getHours()) % 12 || 12; 
    var min = end.getMinutes() - now.getMinutes(); 
    var sec = end.getSeconds() - now.getSeconds(); 
    return [days,
        (hour < 10 ? '0' : '') + hour, 
        (min < 10 ? '0' : '') + min, 
        (sec < 10 ? '0' : '') + sec]; 
}

Open in new window

0
 
Ray PaseurCommented:
See if this code snippet is helpful.  If you do not understand it, please read this article and then post back with any specific questions, thanks. ~Ray
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_201-Handling-date-and-time-in-PHP-and-MySQL.html
<?php // RAY_countdown_timer.php
error_reporting(E_ALL);

// SET THE TIMER VALUE IN THE PHP SCRIPT
$timer = '7';
?>

<script type="text/javascript">
var interval = "";
var sekonds  = <?php echo $timer; ?>;

function startInterval()
{
    interval = window.setInterval("tTimer()",1000);
}
function stopInterval()
{
    window.clearInterval (interval);
    interval="";
}
function tTimer()
{
    document.thinkTime.tDisplay.value = sekonds--;
    if (sekonds == -1)
    {
        stopInterval();
    }
}
</script>

<script>
document.write('<meta http-equiv=\"Refresh\" content=\"<?php echo $timer; ?>;url=http://lmgtfy.com?q=JavaScript+Timer\">');
</script>

<form name="thinkTime">
This page will search for a JavaScript Timer in
<input readonly class="timerBox" size="1" type="text" name="tDisplay" value="">
<script>startInterval();</script>
seconds.
</form>
<a href="http://lmgtfy.com?q=JavaScript+Timer">Click here if you don't want to wait.</a>

Open in new window

0
 
mikearmasAuthor Commented:
ok this has gone a bit off the topic but i couldn't get the http://keith-wood.name/flightBoard.html to work at all. so i have up on it and found other one that i did get to work.

And i almost out it working i just need to insert my time format in to it's settings

Here are the settings i have a time format that looks like this 14:06:14

this time "14:06:14" is being pulled out of a database

$gettime = "SELECT * FROM world WHERE fbid ='$fbid' ";
$getusertime = mysql_query($gettime);
            while($row = mysql_fetch_array($getusertime)){
            $usertime = $row["time"] ;      }

How can i separated the time and put them in the

                                    'hour':               '<?=$time['h']?>',
                                    'min':             '<?=$time['m']?>',
                                    'sec':             '<?=$time['s']?>'
<script language="javascript" type="text/javascript">
			jQuery(document).ready(function() {
				$('#countdown_dashboard').countDown({
					targetDate: {
						'month': 	'1',
						'day': 		'1',
						'year': 	'2099',
						'hour': 	'11',
						'min': 		'20',
						'sec': 		'00'
					}
				});


			});
		</script>

Open in new window

0
 
Ray PaseurCommented:
What is the column definition of the $row["time"] that you refer to?  Is is DATETIME?

Sidebar note: Don't use a MySQL reserved word like TIME as the name of a column.  Eventually it will cause confusion and errors.  Choose something like my_time instead.
0
 
mikearmasAuthor Commented:
good idea i will change that.

$row["time"]  is the Column in the database i set the time to.

And this is how i set it.
$time = rand(1,5);
$expires = date('G:i:s', strtotime("NOW + $time HOURS"));

$setnewtime = "UPDATE world SET time='$expires' WHERE fbid ='$fbid' ";
mysql_query($setnewtime);

it puts it in this format 14:06:14


0
 
Ray PaseurCommented:
When you created the table, did you define the field as TIME or DATETIME?  (Hint: I would choose DATETIME because when you add hours to a time late in the day, the expiration may fall over to the next day.)
0
 
mikearmasAuthor Commented:
I set it to varchar(30)

I been testing and it looks like i need to change my time format to

$expires = date('m d y G:i:s', strtotime("NOW + $time HOURS"));

and out put

12 29 2011 14:06:14

then set each on in to the js settings
targetDate: {
						'month': 	'12',
						'day': 		'29',
						'year': 	'2011',
						'hour': 	'14',
						'min': 		'06',
						'sec': 		'14'
					}

Open in new window

0
 
Ray PaseurCommented:
OK, change it to DATETIME, and then go read the article I posted a link to above.  It will probably show you everything you need to know.  Pay attention to the ISO-8601 format for date and time information.  I'll check back later today.
0
 
mikearmasAuthor Commented:
well i really do like the ISO-8601 format

2011-12-29 17:21:41

it's very clean and changing the time type to DATETIME is nice.

put getting time from the database 2011-12-29 17:21:41

in to a array then putting it in the

targetDate: {
      'month':       '12',
      'day':             '29',
      'year':       '2011',
      'hour':       '14',
      'min':             '06',
      'sec':             '14'
      }

0
 
mikearmasAuthor Commented:
I will be away for a for a few days but looking at this i can see how i can get it to work. thank you
0
 
Ray PaseurCommented:
Thanks for the points.  Enjoy a Happy New Year and whenever you think of questions, please think of EE.  All the best, ~Ray
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.