PHP Script - Live Clock with Timezone

Question

i want a live updated clock for my Server time. basicly its refreshing the date('H:i:s T'); but i cannot get it working.

it should be updated in:

<div id="clock"> </div>

the function i created looks like that:

<script>
function digitalClock() {
  var hrs;
  var mins;
  var tsecs;
  var secs;
  hrs = <?php echo date('H')?>;
  mins = <?php echo date('i')?>;
  secs = <?php echo date('s')?>;


  var ctime = hrs + ":" + mins + ":" + secs + " CEST";
  document.getElementById("clock").firstChild.nodeValue = ctime;
}
window.onload = function() {
  digitalClock();
  setInterval(digitalClock, 1000);
}
</script>

So actually its putting out the correct time but its not updating at all.

if anyone could help i would really appreciate.

If someone could explain how i could make it WITH my CEST Timezone in javascipt, that would be awesome.

Shouldn't `setInterval('digitalClock()', 1000);` be `setInterval('digitalClock', 1000);` and I'd consult the console for any issues. — Script47, Jun 29 '18 at 14:30
Possible duplicate of [Making a live clock in javascript](https://stackoverflow.com/questions/39418405/making-a-live-clock-in-javascript) — Can O' Spam, Jun 29 '18 at 14:30
Secondly, why don't you use JavaScript's date functions instead of PHP? — Script47, Jun 29 '18 at 14:30
If you want to get server time, you'll have to use some kind of ajax call - at the moment you're refreshing the field with the same php-echoed Timestamp over and over again... — Matthias Schmidt, Jun 29 '18 at 14:31
You need to learn the difference between client-side scripting and server-side scripting. Your PHP functions are only going to run _once_, before _any_ of the Javascript is executed. — Patrick Q, Jun 29 '18 at 14:31
The server side code (php) will only run once while the code is being parsed, have a look at ajax or [server-sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) for this purpose — empiric, Jun 29 '18 at 14:32
oh okay, didnt knew that. I have 0 knowledge about javascript or ajax at the moment — Kevin Becker, Jun 29 '18 at 14:34
@KevinBecker - I mean no disrespect here, but if you have "*0 knowledge about javascript or ajax*", the best place to start is some good old Google-Fu, searching something akin to "*how to create a live clock in JavaScript*", research is the best thing for an inquisitive mind! :) — Can O' Spam, Jun 29 '18 at 14:37

AraByte · Accepted Answer · 2018-06-29T15:08:48.163

In your case, the values of hour and minutes and seconds are fixed as PHP will display them once, after that they will be constants, what you need to do is to refresh those values every time the digitalClock() is triggered, here's a way to do so (you further edit this code to match you time zone/server time) and hopefully it will help you

<div id="clock"> </div>
    <script>
    function digitalClock() {
      var d = new Date();
      var h = d.getHours();
      var m = d.getMinutes();       
      var s = d.getSeconds();   
      var hrs;
      var mins;
      var tsecs;
      var secs;
      hrs = h;
      mins = m;
      secs = s;
      var ctime = hrs + ":" + mins + ":" + secs + " CEST";
      document.getElementById("clock").firstChild.nodeValue = ctime;
    }
    window.onload = function() {
      digitalClock();
      setInterval('digitalClock()', 1000);
    }
    </script>

You can use php to get whatever timezone you want.

<?php

date_default_timezone_set("Europe/Berlin");
$tz_time = date("F j, Y h:i:s");

?>
<p id="clock"></p>

<script type="text/javascript">
                        var currenttime = '<?php echo $tz_time;?>'; // Timestamp of the timezone you want to use, in this case, it's server time
                        var servertime=new Date(currenttime);
                        function padlength(l){
                            var output=(l.toString().length==1)? "0"+l : l;
                            return output;
                        }
                        function digitalClock(){
                            servertime.setSeconds(servertime.getSeconds()+1);
                            var timestring=padlength(servertime.getHours())+":"+padlength(servertime.getMinutes())+":"+padlength(servertime.getSeconds());
                            document.getElementById("clock").innerHTML=timestring + " CEST";
                        }
                        window.onload=function(){
                        setInterval("digitalClock()", 1000);
                        }
</script>

its helped, but if i change my computers time to something else, it wont display CEST Timezone aka Europe/Berlin anymore. — Kevin Becker, Jun 29 '18 at 14:40

PHP Script - Live Clock with Timezone

1 Answers1