Realtime Countdown Using PHP,Javascript...

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
User avatar
icarpenter
Forum Commoner
Posts: 84
Joined: Mon Mar 07, 2005 8:12 am
Location: Kent, England

Realtime Countdown Using PHP,Javascript...

Post 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
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
icarpenter
Forum Commoner
Posts: 84
Joined: Mon Mar 07, 2005 8:12 am
Location: Kent, England

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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
ryanlwh
Forum Commoner
Posts: 84
Joined: Wed Sep 14, 2005 1:29 pm

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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)
User avatar
AndrewBacca
Forum Commoner
Posts: 62
Joined: Thu Jan 30, 2003 10:03 am
Location: Isle of Wight, UK

Post by AndrewBacca »

I have a fully working script if you would like it
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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>
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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>
User avatar
icarpenter
Forum Commoner
Posts: 84
Joined: Mon Mar 07, 2005 8:12 am
Location: Kent, England

Post 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...
Post Reply