0

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>
7
  • 3
    sure - just send it down with a request. Commented Oct 7, 2013 at 15:04
  • 1
    Create page with PHP, echo out a javascript variable with the timestamp, and then have javascript increment and re-format. Repetitive AJAX calls would be too expensive Commented Oct 7, 2013 at 15:05
  • I think the comment by Daniel was in fact the answer to this question Commented Oct 7, 2013 at 15:05
  • @DanielA.White Do you have an example? Commented Oct 7, 2013 at 15:07
  • @user2519424 Just try some of the code yourself - then if/when you have problems, ask for help. You'll learn more from doing it yourself than being handed all the code Commented Oct 7, 2013 at 15:09

3 Answers 3

1

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>
Sign up to request clarification or add additional context in comments.

3 Comments

sorry do you have a little bit more example in combination with the above code, i cant fix it
This will yield a fixed date instead of the server time.
function showRemaining() { var now = new Date(); var distance = end - now; Here is the problem, the now = new Date(); is client side, that needs to be server side above is already a fixed date.
0

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.

2 Comments

var now = new Date(); This is the problem. This needs to be server time, not client time.
Yes, my answer will do that, after I debugged it.
0

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.

2 Comments

it works, but doesnt update automaticaly, but shows the right time. After that it doesnt count down
Changed the code, now works and decrements... sorry for posting without fully testing it. Make sure you are testing from a PHP webserver for time.php calls to work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.