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.
Here I found the first part of my solution
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>