Printable View
Hello,
Hope someone can help me out..
I am trying to make my page have a count down clock on it which uses the time on the server rather then using the time on the users computer.
I want to make it display:
Days - Hours - Minutes - secounds
and when the time gets to 0 make it load another page.
anyone know how to do this?
Thanks.
The simplest method is likely to involve a simple javascript countdown tool that has the time initialized via a server side script. What language are you wanting to use on the server side?
DEpending on the accuracy you want/need, JavaScript is probably the easiest way to go.
A super accruate and reliable implementation is QUITE difficult.
JavaScript cannot access the server-side. And, since the OP wants the time from the server, there is going to have to be some implementation from the server.Quote:
Originally Posted by TheCPUWizard
I wrote a script a while back that first grabs the time from the server, and then puts the values into JavaScript variables. However, the client-side will not be 100% accurate. Accuracy will vary machine to machine. But, since the majority of webpages are only viewed for a minute or two, the time will be relatively close to the server.
PHP Code:<?php
$hour = 0;
$minute = 0;
$month = 12;
$day = 25;
$year = 2008;
$event = 'Christmas';
$remaining = date('U', mktime($hour, $minute, 0, $month, $day, $year)) - date('U');
$days = floor($remaining / 60 / 60 / 24);
$hours = $remaining / 60 / 60 % 24;
$minutes = $remaining / 60 % 60;
$seconds = $remaining % 60;
?>
<div id="countdown"></div>
<script type="text/javascript">
var days = '<?php echo $days; ?>';
var hours = '<?php echo $hours; ?>';
var minutes = '<?php echo $minutes; ?>';
var seconds = '<?php echo $seconds; ?>';
var finished = false;
function updatecountdown(){
seconds--;
if(seconds < 0){
seconds = 59;
minutes--;
if(minutes < 0){
minutes = 59;
hours--;
if(hours < 0){
hours = 23;
days--;
if(days < 0){
finished = true;
}
}
}
}
if(!finished){
var message = days + ' days<br />';
message += hours + ' hours<br />';
message += minutes + ' minutes<br />';
message += seconds + ' seconds<br />';
message += 'until <?php echo $event; ?>!';
document.getElementById('countdown').innerHTML = message;
}
else{
document.getElementById('countdown').innerHTML = '<?php echo $event; ?>!';
clearInterval(theInterval);
}
}
var theInterval = setInterval("updatecountdown()", 1000);
</script>
Agreed, I was going the same way as your post where the server pushed down the current time with the initial page and the client did the updating.Quote:
Originally Posted by PeejAvery
Note that in addition to "Drift", this type of approach is difficult (and not covered in your sample) if the time zone (or day light savings time) changes while the counddown is in progress.
The "DIFFICULTY" I was referring to earlier is common in cryptography type (time variant keys) where the timing must be synhronized (typically on the order of sub-milliseconds) including all network and processing latency.
Imagine how hard it would be to have a system where a page was supposed to chage exactly at 03:00 GMT on a given date. Every browser must display the new page at exactly the same time (+/- 1mS) regardless of where in the world they are, or what their networking connection is, or what their hardware capabilities are...
The most important piece to note here is do not use this for anything security related (ie, not showing a contest page until a certain time). If you're trying to give a job time to run, make the server side code perform a check to see if the task is finished - if not, show the countdown clock and reload at zero. Otherwise, someone with Javascript disabled will bypass any security measures you've put in place.