Page 1 of 1

Realtime Countdown Using PHP,Javascript...

Posted: Sun Sep 18, 2005 1:50 pm
by icarpenter
Hi I am trying to create a realtime countdown from a unix timestamp using the php function

Code: Select all

echo gmdate("M d y h:i:s", $unix_timestamp) ,"<br>";
To convert into a date time format...

Does anyone know how to pass a value from PHP into a javascript function to countdown in realtime
which can then be pushed back into the gmdate(); function to convert into a date time format?.

Any help will be greatly appreciated...

Thanks Ian

Posted: Sun Sep 18, 2005 3:22 pm
by s.dot
untested

Code: Select all

<html>
<head>

<script type="text/javascript">
function currentTIme()
{
   document.getElementById("time").innerHTML = '<? echo $time; ?>';
}
setTimeOut(currentTime(),1000);
</script>

</head>
<body onLoad="currentTime();">
<div id="time"><? echo $time; ?></div>
</body>
</html>
Meh, I doubt that will work because the page will only grab the $time variable once. But the idea is still the same. Use javascript to update the time by using setTimeOut on your time function.

Posted: Mon Sep 19, 2005 12:05 pm
by icarpenter
Thanks for that scrotaye didn't quite work though...

a re-think is in order I think...

What I would like achieve is to pass a unix timestamp value from a php variable into a javascript function this value represents the number of seconds from a future date ie: 1135512000 or:

Code: Select all

$unixtimestamp = gmmktime(12, 00, 00, 12, 25, 2005);
which is Dec 25 05 12:00:00 what I would like to do is count down to:-

Code: Select all

echo gmdate("M d y h:i:s") ,"<br>";
As the reference date.

Has anyone used this kind of functionality before....can you pass PHP values in a Javascript function?

Ian.

Posted: Mon Sep 19, 2005 12:11 pm
by feyd
the PHP variables must be converted to Javascript for them to be usable in Javascript.

Code: Select all

echo '<script language="Javascript">
var future = new Date('.gmmktime(12,0,0,12,25,2005).');
</script>';
Other options: http://devguru.com/technologies/javascript/10585.asp

Posted: Mon Sep 19, 2005 12:18 pm
by ryanlwh
scrotaye has already shown you how to pass php variables to javascript:

Code: Select all

<script type="text/javascript">
function currentTIme()
{
   document.getElementById("time").innerHTML = '<? echo $time; ?>';
}
setTimeOut(currentTime(),1000);
</script>
Here, innerHTML of <div id=time> would take whatever value $time has.

In your case, you can initialize two javascript variables with php. Then, use the setTimeOut javascript function to countdown.

Posted: Mon Sep 19, 2005 12:27 pm
by feyd
setTimeout() fires once. setInterval() fires until stopped. :) (need to remember to store the timer reference that it returns so you can stop it with clearTimeout() or clearInterval() respectively)

Posted: Mon Sep 19, 2005 12:56 pm
by AndrewBacca
I have a fully working script if you would like it

Posted: Mon Sep 19, 2005 1:14 pm
by raghavan20
There is one problem with the script if you can figure it out.
it prints out all the count down time at a go instead of printing one value per second.
you have to somehow stop it doing.

Code: Select all

<html>
<head>
<script type  = 'text/javascript'>
	function countDownTime(hours, minutes, seconds){
		if(hours >= 0 && minutes >= 0 && seconds >= 0){
			document.getElementById("time").innerHTML = hours + ":" + minutes + ":" + seconds; 
			if(seconds == 0){
				hours = hours;
				minutes = minutes - 1;
				seconds = 59;
			
				if(minutes == 0){
					hours = hours - 1;
					minutes = 59;
					seconds = 59;
				}
			}else{
				hours = hours;
				minutes = minutes;
				seconds = seconds - 1 ;
			}
			document.write(hours + ":" + minutes + ":" + seconds + "<br>");
			window.setTimeout(countDownTime(hours, minutes, seconds), 1000);

		}
		
	}

</script>
</head>
<body>
<div id = 'time'></div>
<?php
//...get the timestamp from the db

//$hours = date("h", $timestamp);
//$minutes = date("m", $timestamp);
//$seconds = date("s", $timestamp);

$hours = 2;
$minutes = 3;
$seconds = 45;

echo "<script type = 'text/javascript'>countDownTime($hours, $minutes, $seconds);</script>";
?>
</body>
</html>

Posted: Mon Sep 19, 2005 2:27 pm
by raghavan20
finally made this thing work with global variables in javascript.
just make sure you get the timestamp php variable set to the db time stamp value;
also do know that mysql timestamp is different from unix php timestamp.
you have to convert mysql timestamp into php timestamp.

Code: Select all

<?php
//...get the timestamp from the db

//$hours = date("h", $timestamp);
//$minutes = date("m", $timestamp);
//$seconds = date("s", $timestamp);

$hours = 2;
$minutes = 3;
$seconds = 45;
?>

<html>
<head>
<script type  = 'text/javascript'>

	var hours, minutes, seconds, timer, count;
	count = 1;
	hours = <?php echo $hours; ?>;
	minutes = <?php echo $minutes; ?>;
	seconds = <?php echo $seconds; ?>;

</script>

<script type  = 'text/javascript'>
	function countDownTime(){
		if(hours >= 0 && minutes >= 0 && seconds >= 0){
			document.getElementById("time").innerHTML = (count++) + "-" + hours + ":" + minutes + ":" + seconds; 
			if(seconds == 0){
				hours = hours;
				minutes = minutes - 1;
				seconds = 59;
			
				if(minutes == 0){
					hours = hours - 1;
					minutes = 59;
					seconds = 59;
				}
			}else{
				hours = hours;
				minutes = minutes;
				seconds = seconds - 1 ;
			}
			//document.write(hours + ":" + minutes + ":" + seconds + "<br>");
			timer = setTimeout("countDownTime()", 1000);

		}else{
			clearTimeout(timer);
		}
		
	}

</script>
</head>
<body>
<div id = 'time'></div>

<?php
	echo "<script type = 'text/javascript'>countDownTime();</script>";
?>
</body>
</html>

Posted: Tue Sep 20, 2005 6:40 am
by icarpenter
A big Thanks you all for your input especially raghaven20!

AndrewBacca it would be great if I could take a look at your script also...could paste you copy up! or send me a copy - icarpenter@bloomberg.net

Many Thanks again Ian...