PHP / Jquery Clock + countdown

Question

I just wrote another question but It was not well writed and understandable at all, here I'll paste the work I've done atm, and my questions:

• I want to show a clock on my webpage (it's based in wordpress) Showing actual time of the SERVER (important, because I have visitors for all of the world).

-I do need the SERVER time, because I need to to a countdown, everyday, the same, from 19:00PM to 03:00AM.

Here's the code I have until now (I just translated it, Cause it was in spanish, so it should be running fine")

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/javascript">
    //Variables
    var date1;
    var seconds;
    var minutes;
    var hours;
    var x;

    var startHour = 19;

    var finalHour = 3;

    var diferencia1;
    //Funcion principal
    x = $(document);
    x.ready(timer_test);  
    //funcion del timer_test
    function timer_test() {
        x= $("#timer");
        date1 = new Date(<?php echo time() * 1000 ?>);
        seconds = date1.getSeconds();
        minutes = date1.getMinutes();
        hours = date1.getHours();


        if (hours > startHour | hours < finalHour) {
        diferencehours = startHour - hours -1;
        diferenceminutes = 60 - minutes -1;
        diferenceseconds = 60 - seconds;

        x.html("All of our services are running.");

    }

        else if(hours < startHour && hours >= finalHour) {
        diferencehours = startHour - hours -1;
        diferenceminutes = 60 - minutes -1;
        diferenceseconds = 60 - seconds;

        x.html(diferencehours + ":" + diferenceminutes + ":" + diferenceseconds);

        }

    }

    //Interval
    setInterval(timer_test,1000);




  </script>


    <div id="timer"></div>

One of the problems I found, is, the clock is just stucked, time doesn't change at all.

Solutions? How may I improve this?

Thanks

Answer 1

The code <?php echo time() * 1000 ?> will only run once, when the page is served by php. It will not update this from the server every time we see the code.

Try something like this:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    //Variables
    var epoch_time = <?= time() ?>000;
    var startHour = 19;
    var finalHour = 3;

    //Funcion principal
    function timer_test() {
        var date1 = new Date(epoch_time);
        var seconds = date1.getSeconds();
        var minutes = date1.getMinutes();
        var hours = date1.getHours();
        var diferencehours = startHour - hours -1;
        var diferenceminutes = 60 - minutes -1;
        var diferenceseconds = 60 - seconds;

        if (hours > startHour | hours < finalHour) {
            $("#timer").html("All of our services are running.");
        }
        else if(hours < startHour && hours >= finalHour) {
            $("#timer").html(diferencehours + ":" + diferenceminutes + ":" + diferenceseconds);
        }

        epoch_time += 1000;
    }

    $(function() {
        //Interval
        setInterval(timer_test,1000);
    });

  </script>

  <div id="timer"></div>