HTML clock with Javascript and different timezones on a website that can be used in every location of the world without access to the internet

Question

I wrote a code for a clock that displays different timezones on the world without using the internet, realized with html and javascript. The clock is included in a intranet website which is reachable from different locations arround the world. To show the correct times I use the offset function, and this is what my Problem causes. If I set the correct offset for the clocks in germany for example, all times shown correct for the viewers in germany but in america, the times are wrong because the offset is always taken from the client that is executing the script. So in one country the time is correct, in all other countries it is wrong.

I do this in that way because the clock has to work without any sources from the internet because this site is used by a group of people without access to the internet too.

My question is, is there a way to set a ntp server for sync the date function or to use the servertime itself instead of the clienttime so that the offset works in a same way in all countries.

Thank you in advanced for your assistance!

For a better understanding here is the code from one of the described clocks.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
  
  function updateTimeJP() {
  var date = new Date();
<!-- Sommerzeit -->
  date.setTime( date.getTime() + date.getTimezoneOffset()*-210*1000 );
<!-- Winterzeit -->
  <!-- date.setTime( date.getTime() + date.getTimezoneOffset()*-480*1000 ); -->  
  var stunden = ( (date.getHours()<10?'0':'') + date.getHours() );
  var minuten = ( (date.getMinutes()<10?'0':'') + date.getMinutes() );
  //var sekunden = ( (date.getSeconds()<10?'0':'') + date.getSeconds() );
  var tag = date.getDate();
  var monatDesJahres = date.getMonth();
  var jahr = date.getFullYear();
  var tagInWoche = date.getDay();
  var wochentag = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
  var monat = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
    //var datum = wochentag[tagInWoche] + ", " + tag + ". " + monat[monatDesJahres] + " " + jahr + ", " + stunden + ":" + minuten + ":" + sekunden ;
    var datum = wochentag[tagInWoche] + ", " + tag + ". " + monat[monatDesJahres] + " " + jahr;
    //var uhrzeit = stunden + ":" + minuten + ":" + sekunden;
    var uhrzeit = stunden + ":" + minuten;
  document.getElementById('timeJP').innerHTML = datum;
  document.getElementById('clockJP').innerHTML = uhrzeit;
  setTimeout(updateTimeJP, 1000);
}
window.addEventListener("load", updateTimeJP);
</script>
  
    <style>
      #Text{
        text-align: center;
        font-weight: bold;
        line-height: 30px;
      }
      #timeJP {
        width: 100%;
        text-align: center;
      }
      #clockJP {
        width: 100%;
        text-align: center;
      }  
    </style>
  
</head>
<body>
<h5>
<div id="Text">現地時間</br>Oharu-cho, Ama-gun</br>Aichi Japan</p></div>
</h5>
<h5>
    <div id="timeJP">
  </div>
</h5>  
<h4>
    <div id="clockJP">
  </div>
</h4>  
  
</body>
</html>

The Clock is working fine, but for example in this case, only in germany the japanese time is correct, in JP itself, a wrong time is displayed because of the offset to the japanese browsertime.

I think you're over-thinking this and you don't need to make any timezone adjustments. Take a look at the first line of [Date.prototype.getHours() over on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getHours) - _"The getHours() method of Date instances returns the hours for this date according to __local time__." (emphasis mine). This will be the user's local time according to the settings of the device they are viewing the page on. — phuzi, May 05 '23 at 09:10
Hello, that is correct but this is not my problem, on the site are 4 clocks from 4 different timezones visible, so if I use the date function without offset it shows only the local time on all clocks, that´s simply wrong. But the offset works allways from the belonging timezone because the browser/clienttime is used as source. — Flo, May 12 '23 at 09:10
Ah, so you want to see the local time in a few different timezones. Hmm, you cannot alo assume that the offset is fixed for other timezones either due to DST changes that occur throughout the year and will be observed differently in different countries that may initially have the same offset — phuzi, May 12 '23 at 13:58
Yes, that`s my problem, so my question is if there`s is a possibility to define a different timezone for the code of every country, in that way even the changes would be no problem. But if not I would try to set the changes with loops and offset. — Flo, May 15 '23 at 05:09
It feels like you're going to have define which timezones you wish to show and then query a timezone database to figure out what the current offset is and if there are any upcoming changes. You now have 2 options - 1. download a timezone database that you can query to figure out the current offsets 2. use a library like Luxon ([timezone info docs here]((https://moment.github.io/luxon/#/zones)) that can make this experience easier. Which ever way you go you're going to have to keep these up to date as they can be updated frequently. — phuzi, May 15 '23 at 07:57
Hello, I have a solution for my problem, date.getUTC* does the magic, in that way I can set a offset to the different locations and the time is correct for everyone. I found the solution here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset?retiredLocale=de — Flo, Jun 01 '23 at 13:14
If you like you could add your own answer and go in to detail about your solution. You can even accept your own answer. — phuzi, Jun 01 '23 at 13:16

Flo · Accepted Answer · 2023-06-06T11:16:44.983

Here I found the first part of my solution

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset?retiredLocale=de

and here the second one

How to add hours to a Date object?

Here´s the code now, may be someone can tell me additional how I can implement an if else loop to define summer and wintertime, thank you for your help with this!

   <!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
  
  function updateTimeJP() {
  var date = new Date();
<!-- Sommerzeit -->
date = new Date(date.setHours(date.getHours() + 2));
<!-- Winterzeit -->
  //date = new Date(date.setHours(date.getHours() + 1)); date.getTimezoneOffset()*-450*1000 );  
  var stunden = ( (date.getUTCHours()<10?'0':'') + date.getUTCHours() );
  var minuten = ( (date.getUTCMinutes()<10?'0':'') + date.getUTCMinutes() );
  //var sekunden = ( (date.getUTCSeconds()<10?'0':'') + date.getUTCSeconds() );
  var tag = date.getUTCDate();
  var monatDesJahres = date.getUTCMonth();
  var jahr = date.getUTCFullYear();
  var tagInWoche = date.getUTCDay();
  var wochentag = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
  var monat = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
    //var datum = wochentag[tagInWoche] + ", " + tag + ". " + monat[monatDesJahres] + " " + jahr + ", " + stunden + ":" + minuten + ":" + sekunden ;
    var datum = wochentag[tagInWoche] + ", " + tag + ". " + monat[monatDesJahres] + " " + jahr;
    //var uhrzeit = stunden + ":" + minuten + ":" + sekunden;
    var uhrzeit = stunden + ":" + minuten;
  document.getElementById('timeJP').innerHTML = datum;
  document.getElementById('clockJP').innerHTML = uhrzeit;
  setTimeout(updateTimeJP, 1000);
    
var view;
  
if (datum === "Monday, 17. July 2023") {
  view = "Marine Day";
} else if (datum === "Friday, 11. August 2023") {
  view = "Mountain Day";
} else if (datum === "Monday, 18. September 2023") {
  view = "Respect for the Aged Day";
} else if (datum === "Monday, 09. October 2023") {
  view = "Sports Day";
} else if (datum === "Friday, 3. November 2023") {
  view = "Culture Day";
} else if (datum === "Thursday, 23. November 2023") {
  view = "Labor Thanksgiving Day";
} else {
  view = "";
} 

document.getElementById('viewJP').innerHTML = view;     
    
}
window.addEventListener("load", updateTimeJP);
</script>
  
    <style>
      #Text{
        text-align: center;
        font-weight: bold;
        line-height: 30px;
      }
      #timeJP {
        width: 100%;
        text-align: center;
      }
      #clockJP {
        width: 100%;
        text-align: center;
      }
      #viewJP {
        width: 100%;
        text-align: center;
      }
    </style>
  
</head>
<body>
<h5>
<div id="Text">現地時間</br>Oharu-cho, Ama-gun</br>Aichi Japan</p></div>
</h5>
<h5>
    <div id="timeJP">
  </div>
</h5>  
<h4>
    <div id="clockJP">
  </div>
</h4>  
<h4>
    <div id="viewJP">
  </div>
</h4>
</body>
</html>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jun 01 '23 at 13:31

HTML clock with Javascript and different timezones on a website that can be used in every location of the world without access to the internet

1 Answers1