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