Is it possible to use this script with server time instead of client time. (For checking if time is past) It now uses client time and thats a problem. (Maybe with php??)
<script>
var end = new Date('02/19/2012 10:1 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + 'days ';
document.getElementById('countdown').innerHTML += hours + 'hrs ';
document.getElementById('countdown').innerHTML += minutes + 'mins ';
document.getElementById('countdown').innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
</script>
<div id="countdown"></div>
You can get time from ajax request, or use something like this:
<?php
$now = date('d-m-Y');
$end= "01-01-2013"
$date = strtotime($end) - strtotime($now);
$days = date('d', $date);
$monthes= date('m', $date);
$years= date('Y', $date);
?>
<script>
var days = "<?= $days ?>";
var monthes= "<?= $monthes?>";
var years= "<?= $years?>";
document.getElementById('countdown').innerHTML = days+ ' days';
document.getElementById('countdown').innerHTML += monthes+ ' monthes';
document.getElementById('countdown').innerHTML += years+ ' years';
</script>
Puku's answer will return a fixed date, instead of server time. He seems to have fixed it.
I propose:
<script>
var date = <? echo time(); ?>;
// etc...
</script>
This will fetch the amount of (server) seconds since the Unix epoch IIRC and stuff it in the variable 'date' as an int. Note everything between <? and ?> is PHP and thus executed on the server.
Note I didn't use abbreviated syntax, like puku. I don't have it by default and I can't change that, so I thought it'd be nice to use this notation for those with the same problem.
Found an example similar with Ajax at http://www.roseindia.net/ajax/ajax-first-example.shtml
[UPDATE] After comments stating my previous post this didn't work, i've reviewed everying and changed the JavaScript and PHP file (giving full code now). This code now works. I've tried to keep it as similar as possible to the original example and the link previously provided instead of optimizing things (I'll leave that to you).
<script>
var end = new Date('02/19/2014 10:1 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
var distance;
function startShowRemaining(strnow) {
var now = new Date(strnow);
distance = end - now;
//To prevent 1 sec. lag, we make first a direct call to showRemaining
showRemaining();
//Then each second, we decrement count and show info
timer = setInterval(countRemaining, 1000);
}
function countRemaining() {
distance = distance - 1000; //we substract a second (1000 ms) with each call
showRemaining();
}
function showRemaining() {
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + ' days ';
document.getElementById('countdown').innerHTML += hours + ' hrs ';
document.getElementById('countdown').innerHTML += minutes + ' mins ';
document.getElementById('countdown').innerHTML += seconds + ' secs';
}
function postRequest(strURL) {
var xmlHttp;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
var xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open('POST', strURL, true);
xmlHttp.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
startShowRemaining(xmlHttp.responseText);
}
}
xmlHttp.send(strURL);
}
postRequest('time.php');
</script>
<div id="countdown"></div>
And create file: time.php
<?php
print date("d/m/Y H:i:s");
?>
PHP file is called once to get current date, then the "distance" var is decremented each second to prevent further Ajax calls that uses bandwidth and... can take more than one second anyway. A different function for decrementing is used, so we can call showRemaining immediatly without decrementing it (You could also start increasing 1000 in the first call and use only one function..).
Anyway I prefer Puku approach to just use PHP to write the right value for the "now" var, it is simpler. This one is nice only as an example of Ajax use.