jQuery Clock Server Example

Source Code for jQuery Clock plugin at https://github.com/JohnRDOrazio/jQuery-Clock-Plugin

In order for the server time to display correctly in a jquery clock widget, the server timestamp must first be compensated with the timezone offset.
This trick may not seem so intuitive, but that's how it can work correctly with the performance api.

Server timezone set to:	America/Los_Angeles
Current Server Time (calculated from server timestamp by compensating for timezone offset!):	compared to Current Local Time:

Server time using `strftime()`:🛈	April 24, 2024 at 11:19:22 PM PDT
Server time using `date()`:🛈	11:19:22 PM America/Los_Angeles
Server time using `gmstrftime()`:🛈	06:19:22 AM +00:00
Server time compensated with timezone offset:🛈	04:19:22 PM America/Los_Angeles
Time that was fed into the jquery clock:🛈	04:19:22 PM PDT (timestamp: 1714000762)

Server timezone set to:	Pacific/Easter
Current Server Time (calculated from server timestamp by compensating for timezone offset!):	compared to Current Local Time:

Server time using `strftime()`:🛈	April 25, 2024 at 12:19:22 AM GMT-6
Server time using `date()`:🛈	12:19:22 AM Pacific/Easter
Server time using `gmstrftime()`:🛈	06:19:22 AM +00:00
Server time compensated with timezone offset:🛈	06:19:22 PM Pacific/Easter
Time that was fed into the jquery clock:🛈	06:19:22 PM -06 (timestamp: 1714004362)

<!DOCTYPE html> 
<html> 
  <head> 
    <title>jQuery Clock server side example</title> 
    <meta charset="UTF-8"> 
    <style type="text/css"> 
      body { background-color: Gray; } 
      #clocks-container { border: 1px groove White; border-radius: 15px; padding: 10px; width: 50%; margin: 30px auto; background-color: LightGray; text-align: center; } 
      /* SAMPLE CSS STYLES FOR JQUERY CLOCK PLUGIN */ 
      .jqclock { text-align:center; border: 2px #369 ridge; background-color: #69B; padding: 10px; margin:20px auto; width: 40%; box-shadow: 5px 5px 15px #005; } 
      .jqclock > .clockdate { color: DarkRed; font-weight: bold; background-color: #7AC; margin-bottom: 10px; font-size: 18px; display: block; padding: 5px 0; } 
      .jqclock > .clocktime { border: 2px inset DarkBlue; background-color: #444; padding: 5px 0; font-size: 14px; font-family: "Courier"; color: LightGreen; margin: 2px; display: block; font-weight:bold; text-shadow: 1px 1px 1px Black; } 
    </style> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="//rawgit.com/JohnRDOrazio/jQuery-Clock-Plugin/master/jqClock.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        const customtimestamp = parseInt($("#jqclock").data("time"));
        const isDST = Boolean(parseInt($("#jqclock").data("dst")));
        const timezone = $("#jqclock").data("timezone");
        $("#jqclock").clock({ "locale": "en", "timestamp": customtimestamp, "isDST": isDST, "timezone": timezone });
        $("#jqclock-local").clock({ "locale": "en" });
      });
    </script>
  </head>
  <body>
    <h1>jQuery Clock Server Example</h1> 
    <p>Source Code at <a href="https://github.com/JohnRDOrazio/jQuery-Clock-Plugin">https://github.com/JohnRDOrazio/jQuery-Clock-Plugin</a></p> 

    <div id="clocks-container"> 
      <h2>Current Server Time:</h2> 
      <div id="jqclock" class="jqclock" data-time="<?php echo (time() + date('Z')); ?>" data-dst="<?php echo date('I');?>" data-timezone="America/Los_Angeles"></div> 

      <h2>Compared to Current Local Time:</h2> 
      <div id="jqclock-local" class="jqclock"></div> 

    </div>
  </body>
</html>