Florians Forum » Webmaster » Ideen für Skripte und sonstige Quellcodes » Weltzeituhr - Halbe Stunden
Hallo Florian,
vielleicht hast Du die Beiträge für die Weltzeituhr in meinem Forum mitverfolgt.
Das Problem sind halbe Stunden in der Zeitverschiebung.
Von betroffen sind z.B. Indien und Colombo mit 5.5 Std. und Kabul mit 4.5Std.
Hier fehlt eine Zeitkorrektur.
Die erste halbe Stunde wird falsch angezeigt.
Weist Du weiter?
Kann man das Script verkleinern?
In dem Script ist Indien mit einer Zeitverschiebung von GMT 5.5 eingetragen (time3).
Die Zeile folgende zeile funktioniert nicht richtig!
var timeGMTs55 = checkTime24((minuten+29) > 60 ? (gmt-18) : (gmt+5)); //GMT+5.5 / Indien
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<style type="text/css">
.background_time{background-image:url(http://www.bilder-hochladen.net/files/big/kr03-3e-07e1.jpg);padding:40px;}
#local{font-weight:bold;text-align:center;color:#ffffff;padding-bottom:10px;font-size:18px}
.timex {text-align:center;color:#ffffff;font-size:16px;padding:5px;}
.timex div {text-align:center;color:#ffffff;font-size:11px;padding:5px;}
.time100 {text-align:center;color:#aaffff;font-size:16px;padding:5px;}
.time100 div {text-align:center;color:#aaffff;font-size:11px;padding:5px;}
</style>
<SCRIPT LANGUAGE="JavaScript">
function WorldTime() {
var date = new Date();
var stunden = date.getHours();
var minuten = date.getMinutes();
var sekunden = date.getSeconds();
var tag = date.getDate();
var monatDesJahres = date.getMonth();
var monatNum = date.getMonth()+1;
var jahr = date.getFullYear();
var tagInWoche = date.getDay();
var wochentag = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
var monat = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
var gmt = (stunden + date.getTimezoneOffset()/60);
var MinSek = ":" + IfNull(minuten) + ":" + IfNull(sekunden);
//Zeitverschiebung Stunden
var timeGMT1 = checkTime24((gmt+1) > 24 ? (gmt-23) : (gmt+1)); //GMT+1
var timeGMT2 = checkTime24((gmt+2) > 24 ? (gmt-22) : (gmt+2)); //GMT+2
var timeGMT3 = checkTime24((gmt+3) > 24 ? (gmt-21) : (gmt+3)); //GMT+3
var timeGMT4 = checkTime24((gmt+4) > 24 ? (gmt-20) : (gmt+4)); //GMT+4
var timeGMT5 = checkTime24((gmt+5) > 24 ? (gmt-19) : (gmt+5)); //GMT+5
var timeGMT6 = checkTime24((gmt+6) > 24 ? (gmt-18) : (gmt+6)); //GMT+6
var timeGMT7 = checkTime24((gmt+7) > 24 ? (gmt-17) : (gmt+7)); //GMT+7
var timeGMT8 = checkTime24((gmt+8) > 24 ? (gmt-16) : (gmt+8)); //GMT+8
var timeGMT9 = checkTime24((gmt+9) > 24 ? (gmt-15) : (gmt+9)); //GMT+9
var timeGMT10 = checkTime24((gmt+10) > 24 ? (gmt-14) : (gmt+10)); //GMT+10
var timeGMT11 = checkTime24((gmt+11) > 24 ? (gmt-13) : (gmt+11)); //GMT+11
var timeGMT12 = checkTime24((gmt+12) > 24 ? (gmt-12) : (gmt+12)); //GMT+12
var timeGMTx12 = checkTime24((gmt+12) > 24 ? (gmt-12) : (gmt+12)); //GMT-12
var timeGMTx11 = checkTime24((gmt+13) > 24 ? (gmt-11) : (gmt+13)); //GMT-11
var timeGMTx10 = checkTime24((gmt+14) > 24 ? (gmt-10) : (gmt+14)); //GMT-10
var timeGMTx9 = checkTime24((gmt+15) > 24 ? (gmt-9) : (gmt+15)); //GMT-9
var timeGMTx8 = checkTime24((gmt+16) > 24 ? (gmt-8) : (gmt+16)); //GMT-8
var timeGMTx7 = checkTime24((gmt+17) > 24 ? (gmt-7) : (gmt+17)); //GMT-7
var timeGMTx6 = checkTime24((gmt+18) > 24 ? (gmt-6) : (gmt+18)); //GMT-6
var timeGMTx5 = checkTime24((gmt+19) > 24 ? (gmt-5) : (gmt+19)); //GMT-5
var timeGMTx4 = checkTime24((gmt+20) > 24 ? (gmt-4) : (gmt+20)); //GMT-4
var timeGMTx3 = checkTime24((gmt+21) > 24 ? (gmt-3) : (gmt+21)); //GMT-3
var timeGMTx2 = checkTime24((gmt+22) > 24 ? (gmt-2) : (gmt+22)); //GMT-2
var timeGMTx1 = checkTime24((gmt+23) > 24 ? (gmt-1) : (gmt+23)); //GMT-1
var timeGMT = checkTime24(gmt+24); //Greenwich Mean Time - GMT
// Zeitverschiebung + 30Minuten
var timeGMTs55 = checkTime24((minuten+29) > 60 ? (gmt-18) : (gmt+5)); //GMT+5.5 / Indien
var timeGMTm55 = checkTime60((minuten+29) > 60 ? (minuten-30) : (minuten+30)); //GMT+5.5 / Indien
var dateGMT55 = tag + (((gmt*60)+minuten)+(60*5)+29 > 1440 ? 1 : 0); //GMT+5.5 //Indien
//Zeitverschiebung Datum
var dateGMT1 = tag + ((gmt+1) >= 24 ? 1 : 0); //GMT+1
var dateGMT2 = tag + ((gmt+2) >= 24 ? 1 : 0); //GMT+2
var dateGMT3 = tag + ((gmt+3) >= 24 ? 1 : 0); //GMT+3
var dateGMT4 = tag + ((gmt+4) >= 24 ? 1 : 0); //GMT+4
var dateGMT5 = tag + ((gmt+5) >= 24 ? 1 : 0); //GMT+5
var dateGMT6 = tag + ((gmt+6) >= 24 ? 1 : 0); //GMT+6
var dateGMT7 = tag + ((gmt+7) >= 24 ? 1 : 0); //GMT+7
var dateGMT8 = tag + ((gmt+8) >= 24 ? 1 : 0); //GMT+8
var dateGMT9 = tag + ((gmt+9) >= 24 ? 1 : 0); //GMT+9
var dateGMT10 = tag + ((gmt+10) >= 24 ? 1 : 0); //GMT+10
var dateGMT11 = tag + ((gmt+11) >= 24 ? 1 : 0); //GMT+11
var dateGMT12 = tag + ((gmt+11) >= 24 ? 1 : 0); //GMT+12
var dateGMTx12 = tag + ((gmt-12) >= 0 ? 0 : -1); //GMT-12
var dateGMTx11 = tag + ((gmt-11) >= 0 ? 0 : -1); //GMT-11
var dateGMTx10 = tag + ((gmt-10) >= 0 ? 0 : -1); //GMT-10
var dateGMTx9 = tag + ((gmt-9) >= 0 ? 0 : -1); //GMT-9
var dateGMTx8 = tag + ((gmt-8) >= 0 ? 0 : -1); //GMT-8
var dateGMTx7 = tag + ((gmt-7) >= 0 ? 0 : -1); //GMT-7
var dateGMTx6 = tag + ((gmt-6) >= 0 ? 0 : -1); //GMT-6
var dateGMTx5 = tag + ((gmt-5) >= 0 ? 0 : -1); //GMT-5
var dateGMTx4 = tag + ((gmt-4) >= 0 ? 0 : -1); //GMT-4
var dateGMTx3 = tag + ((gmt-3) >= 0 ? 0 : -1); //GMT-3
var dateGMTx2 = tag + ((gmt-2) >= 0 ? 0 : -1); //GMT-2
var dateGMTx1 = tag + ((gmt-1) >= 0 ? 0 : -1); //GMT-1
var dateGMT = tag; //Greenwich Mean Time - GMT
//AkuelleZeit mit Datum - Wochentag und Monat ausgeschrieben
document.getElementById('local').innerHTML = wochentag[tagInWoche] + ", " + IfNull(tag) + ". " + monat[monatDesJahres] + " " + jahr + " - " + IfNull(stunden) + ":" + IfNull(minuten) + ":" + IfNull(sekunden);
//AkuelleZeit mit Datum - Wochentag und Monat in Zahlen
//document.getElementById('local').innerHTML = IfNull(tag) + ". " + IfNull(monatNum) + ". " + jahr + " - " + IfNull(stunden) + ":" + IfNull(minuten) + ":" + IfNull(sekunden);
//Weltzeiten
document.getElementById('time1').innerHTML = IfNull(dateGMTx5) + "." + IfNull(monatNum) + "." + jahr + "<br>" + IfNull(timeGMTx5) + MinSek; //New York GMT-5
document.getElementById('time2').innerHTML = IfNull(dateGMTx2) + "." + IfNull(monatNum) + "." + jahr + "<br>" + IfNull(timeGMTx2) + MinSek; //Sao Poulo GMT-2
document.getElementById('time3').innerHTML = IfNull(dateGMT55) + "." + IfNull(monatNum) + "." + jahr + "<br>" + IfNull(timeGMTs55) + ":" + IfNull(timeGMTm55) + ":" + IfNull(sekunden); //Indien GMT+5.5
document.getElementById('time4').innerHTML = IfNull(dateGMT9) + "." + IfNull(monatNum) + "." + jahr + "<br>" + IfNull(timeGMT9) + MinSek; //Tokio GMT+9
document.getElementById('time5').innerHTML = IfNull(dateGMT10) + "." + IfNull(monatNum) + "." + jahr + "<br>" + IfNull(timeGMT10) + MinSek; //Sydney GMT+10
document.getElementById('time6').innerHTML = IfNull(dateGMT10) + "." + IfNull(monatNum) + "." + jahr + "<br>" + IfNull(timeGMT10) + MinSek; //Melbourne GMT+10
document.getElementById('time7').innerHTML = IfNull(dateGMTx5) + "." + IfNull(monatNum) + "." + jahr + "<br>" + IfNull(timeGMTx5) + MinSek; //Ottawa GMT-5
document.getElementById('time8').innerHTML = IfNull(dateGMT3) + "." + IfNull(monatNum) + "." + jahr + "<br>" + IfNull(timeGMT3) + MinSek; //Moscow GMT+3
document.getElementById('time9').innerHTML = IfNull(dateGMT1) + "." + IfNull(monatNum) + "." + jahr + "<br>" + IfNull(timeGMT1) + MinSek; //Rom GMT+1
document.getElementById('time10').innerHTML = IfNull(dateGMT8) + "." + IfNull(monatNum) + "." + jahr + "<br>" + IfNull(timeGMT8) + MinSek; //Peking GMT+8
document.getElementById('time11').innerHTML = IfNull(dateGMTx8) + "." + IfNull(monatNum) + "." + jahr + "<br>" + IfNull(timeGMTx8) + MinSek; //Los Angeles GMT-8
document.getElementById('time12').innerHTML = IfNull(dateGMT2) + "." + IfNull(monatNum) + "." + jahr + "<br>" + IfNull(timeGMT2) + MinSek; //Istanbul GMT+2
document.getElementById('time13').innerHTML = IfNull(dateGMT) + "." + IfNull(monatNum) + "." + jahr + "<br>" + IfNull(timeGMT) + MinSek; //Casa Blanca GMT
document.getElementById('time14').innerHTML = IfNull(dateGMTx6) + "." + IfNull(monatNum) + "." + jahr + "<br>" + IfNull(timeGMTx6) + MinSek; //Mexico GMT-6
document.getElementById('time100').innerHTML = IfNull(dateGMT) + "." + IfNull(monatNum) + "." + jahr + "<br>" + IfNull(timeGMT) + MinSek; //GMT - Greenwich Mean Time - London
setTimeout("WorldTime()", 1000);
}
//Check
function IfNull(num) {
return (num <10 ? ("0" + num) : num);
}
function checkTime24(hour) {
return (hour >23 ? (hour-24) : hour);
}
function checkTime60(minu) {
return (minu > 59 ? (minu-60) : minu);
}
window.onload = WorldTime;
</script>
<!-- Uhr kommt zur Anzeige -->
<div class="background_time">
<center>
<table>
<tr>
<td colspan="15" id="local"></td>
</tr>
<tr>
<td class="timex">New York<br><div id="time1"></div></td>
<td class="timex">Sao Poulo<br><div id="time2"></div></td>
<td class="timex">Indien<br><div id="time3"></div></td>
<td class="timex">Tokio<br><div id="time4"></div></td>
<td class="timex">Sydney<br><div id="time5"></div></td>
<td class="timex">Melbourne<br><div id="time6"></div></td>
<td class="timex">Ottawa<br><div id="time7"></div></td>
<td class="timex">Moscow<br><div id="time8"></div></td>
<td class="timex">Rom<br><div id="time9"></div></td>
<td class="timex">Peking<br><div id="time10"></div></td>
<td class="timex">Los Angeles<br><div id="time11"></div></td>
<td class="timex">Istanbul<br><div id="time12"></div></td>
<td class="timex">Casa Blanca<br><div id="time13"></div></td>
<td class="timex">Mexico<br><div id="time14"></div></td>
<td class="time100">GMT<br><div id="time100"></div></td>
</tr>
</table>
</center>
</div>
Hallo Wolfgang,
schätze schon, dass du es um einiges kürzen kannst. Aktuell hast du ja sehr viele Variablen und bei allen komplexe Berechnungen, die oft ähnlich, aber doch nicht immer gleich sind. Wenn möglich sollte sowas immer in eine kurze Funktion gepackt werden, dann versteht man auch leichter das Prinzip dahinter und Änderungen ziehen nicht immer so viel Arbeit mit sich.
Also am besten machst du dir bei Datum/Zeit-Problemen immer so gut es geht die Date-Klasse zu Nutze, diese hat bereits viele Funktionen mit dabei und beachtet dabei auch so Sachen wie bspw. den Datumswechsel bei verschiedenen Zeitzonen. Intern speichert das Date-Objekt immer die UTC-Zeit (und die in Millisekunden), bei der Ausgabe wird dann ggf. die eigene Zeitzone draufgerechnet, um die Lokalzeit auszugeben. Bei der gleichzeitigen Ausgabe verschiedener Zeitzonen muss man das ein wenig beachten.
Man kann dann z.B. die Verschiebung auf die UTC-Zeit draufrechnen und sich dann die UTC-Zeit direkt anzeigen lassen:
2
3
4
5
6
7
8
9
10
11
12
13
function getTimeShiftMinutes(minutes) {
if (typeof minutes === 'undefined')
minutes = ((new Date()).getTimezoneOffset() * (-1));
var localTime = new Date();
localTime.setMinutes(localTime.getMinutes() + minutes);
return localTime;
}
var indiaDelhi = getTimeShiftMinutes(330);
console.log(indiaDelhi.getUTCHours() + ':' + indiaDelhi.getUTCMinutes() + ':' + indiaDelhi.getUTCSeconds());
Hierbei wird dann nicht noch zusätzlich die eigene Zeitzone oben draufaddiert. Damit kannst du dir dann die einzelnen Werte wie Stunden und Minuten einzeln herausziehen und passend zusammenbauen.
Alternativ rechnet man die eigene Zeitzone zuerst heraus.
Nach der Addition der Wunsch-Zeitzone gibt man das Date-Objekt als Lokalzeit aus, wodurch die eigene Zeitzone wieder automatisch draufgerechnet wird:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function getTimeShiftMinutesLocalFormat(minutes) {
var timeZoneOffset = ((new Date()).getTimezoneOffset() * (-1));
if (typeof minutes === 'undefined')
minutes = timeZoneOffset;
var localTime = new Date();
localTime.setMinutes(localTime.getMinutes() - timeZoneOffset + minutes);
return localTime;
}
function getTimeShiftHoursLocalFormat(hours) {
if (typeof hours === 'undefined')
hours = (new Date()).getTimezoneOffset() / (-60);
return getTimeShiftMinutesLocalFormat(hours * 60);
}
console.log(getTimeShiftMinutesLocalFormat(330).toLocaleString()); // Nur Datum: toLocaleDateString(), Zeit: toLocaleTimeString()
console.log(getTimeShiftHoursLocalFormat(5.5).toLocaleString());
Der Vorteil bei der Ausgabe als lokales Zeitformat ist die Formatierung. Datum und zeit müssen nicht mehr selbst zusammengebaut werden und sie besitzen gleich das korrekte Format. In Deutschland werden bis zu 24h angezeigt und in einem anderen Land erhalten die Leute z.B. automatisch eine Ausgabe mit AM/PM. Selbst Formate mit anderen Schriftzeichen werden berücksichtigt, was nur schwerlich selbst für jedes Land zusammengebaut werden kann.
Theoretisch lässt sich auch alles über die vergangenen Millisekunden berechnen. Ich finde es aber schöner, wenn man mit dem Datums-Objekt selbst rechnet und nicht immer diesen Umweg gehen muss. Es gibt sogar auch Bibliotheken, welche das für einen erledigen können. Ein Beispiel wäre da moment-timezone.js und evtl. auch die Utility functions vom jQuery-Datepicker wie z.B. $.datepicker.formatDate().
Bei meinem zweiten Skript habe ich die toLocaleString()-Methode verwendet, um das Datum jedem so auszugeben, wie im eigenen Land üblich. Ganz unten sind dort auch die Verweise auf die Methoden gelistet, um nur das Datum oder die Zeit alleine auszugeben. In Safari konnte ich das Skript jetzt aber nicht gerade testen, ob es bereits unterstützt wird.
Jedenfalls kannst du bei beiden Skripten die Zeitverschiebung in Minuten als Parameter übergeben. Bei letzterem geht das sogar auch in Stunden, das kannst du aber bestimmt auch für das erste nachbauen, wenn du dich dafür entscheiden solltest. Ebenfalls würde sich dort auch anbieten, dass Zusammenbauen des Ausgabe-Strings in eine extra Funktion zu packen. Dann brauchst du nicht jedes Datum in eine Variable reinpacken, sondern hast nur ein paar gezielte Funktionsaufrufe an der richtigen Stelle.
Ich würde es ja so versuchen, dass ich den HTML-Tags mit den ausgegebenen Zeiten entsprechende data-Attribute vergebe. Ein Skript geht dann immer wieder die HTML-Tags durch und liest deren data-Attribut aus, in welchem die dort gewünschte Zeitzone steht. Der ausgelesene Wert wird in eine der obigen Funktionen (oder eine eigene) eingesetzt und das Ergebnis dann in das aktuell durchlaufene HTML-Tag geschrieben. Damit hast du nur wenige Funktionen, die dir das alles regeln. Und beim erweitern fügst du nach und nach nur noch neue HTML-Tags hinzu, deren data-Attribut die neue Zeitzone beinhaltet. Das Skript erfasst das bereits automatisch mit, wenn es sowieso über alle Elemente drübergeht.
Hallo Florian,
dass verkleinert das Script immens! Klasse!
Ich habe einiges festgestellt:
1. Mit einem Browsernachbildner (BrowseEmAll) funktioniert es auch im Safari 5.1
2. Das Datum wechselte bei einigen Browser-Versionen von 11.11.1111 auf Dienstag, 11. November 1111 (kann auch am "BrowseEmAll" liegen)
Frage:
1. Kann man das Format für die Ausgabe so festlegen, dass nur Zahlen ausgegeben werden?
2. Habe es nur mit docoment.write hinbekommen
3. Die aktualisierende Uhr will auch nicht so richtig - brauche ich hier den onload-Befehl?
4. Die Null-Korrektur bei der Uhrzeit funktioniert, beim Datum nicht (ifNull)
5. Habe die nicht funktionierenden Elemente auskommentiert (Rot).
6. Wo liegt der Fehler?
Beispiel für Indien
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script>
//function showWouldTime(TimeWelt) {
//var Indien = getTimeShiftHoursLocalFormat(5.5).toLocaleTimeString();
//document.getElementById('timeX').innerHTML = TimeWelt.getAttribute("TimeWeltX")
//setTimeout("showWouldTime()", 1000);
//}
function getTimeShiftMinutesLocalFormat(minutes) {
var timeZoneOffset = ((new Date()).getTimezoneOffset() * (-1));
if (typeof minutes === 'undefined')
minutes = timeZoneOffset;
var localTime = new Date();
localTime.setMinutes(localTime.getMinutes() - timeZoneOffset + minutes);
return localTime;
}
function getTimeShiftHoursLocalFormat(hours) {
if (typeof hours === 'undefined')
hours = (new Date()).getTimezoneOffset() / (-60);
return getTimeShiftMinutesLocalFormat(hours * 60);
}
document.write('Indien<br>' + IfNull(getTimeShiftHoursLocalFormat(5.5).toLocaleTimeString()) + '<br>');
document.write(IfNull(getTimeShiftHoursLocalFormat(5.5).toLocaleDateString()));
function IfNull(num) {
return (num <10 ? ("0" + num) : num);
}
//window.onload = showWouldTime;
</script>
<br><br>
<!--<div class="xyz">Indien<br><div id="timeX" TimeWeltX="Indien"></div></div>-->
Bis dann und besten Dank
Wolfgang
Hallo Wolfgang,
vielleicht liegt der Darstellungs-Fehler wirklich an BrowseEmAll oder die Date-Funktion .toLocaleDateString() wird wie schonmal vorsichtig angedeutet nicht korrekt unterstützt.
- Der zweite Code-Vorschlag beinhaltete ja die automatische Formatierung. Für eine eigene musst du wohl auf erstere Variante zugreifen und dir die Zahlen einzeln herausziehen.
- Unter dem Stichwort DOM-Manipulation mit jQuery solltest du fündig werden. Dort gibt es dann z.B. prepend(), append(), before(), after() usw., falls nötig auch .html() um ohne document.write auszukommen.
- Statt onload empfiehlt sich oft $(document).ready(function(){ … }); von jQuery. Um eine Aktion immer in gewissen Abständen auszuführen, kannst du dich window.setInterval bedienen.
- Meinst du damit führende Nullen? Bei der zweiten Variante ist das Format eben fix, da kommst du an die Tage und Monate nicht direkt ran, allerdings hatten die bei mir glaube ich immer führende Nullen. Evtl. gibt es da Unterschiede in unseren Lokalitäts-Einstellungen.
Ansonsten gilt auch hier, dass du mit ersterer Code-Variante an die einzelnen Zahlen kommst. Auch für Tag, Monat etc. gibt es eine entsprechende getUTC…()-Funktion. Auffüllen erledigst du dann am besten mit einer kleinen Extra-Funktion, welche dir das übernimmt. Z.B. die hier oder noch besser die Padding-Funktionen von hier sehen dazu geeignet aus. - Die showWouldTime verwendet einen Parameter, bekommt aber weder bei onload noch bei setTimeout einen übergeben.
(Müsste auch als Error in der Fehlerkonsole auftauchen.) - Das TimeWeltX muss dir nicht nochmal den Ortsnamen sagen. Um valides HTML zu erhalten, benenne es um in data-TimeWeltX und schreibe dort die Zeitverschiebung in Stunden oder Minuten rein. Den ausgelesenen Wert kannst du dann z. B. automatisch in getTimeShiftMinutesLocalFormat(ATTRIBUT_WERT) einsetzen lassen und das Berechnungs-Ergebnis dann in das DIV als Inhalt reinschreiben.
Damit wird das Ganze flexibel, da du einfach nur die HTML-Elemente durchgehen musst. Attribut auslesen und Wert zurückschreiben ist dann immer gleich, das Ergebnis unterscheidet sich aber immer aufgrund des unterschiedlichen Attribut-Wertes für jede Zeitzone.
Hi Wolfgang,
ich habe das mal beispielhaft so wie vorgeschlagen kombiniert.
Dabei kam folgendes Skript heraus:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
$(document).ready(function(){
Number.prototype.lpad = function(padString, length) {
var str = '' + this; // Zahl in String konvertieren
while (str.length < length) {
str = padString + str;
}
return str;
}
function getTimeShiftMinutes(minutes) {
if (typeof minutes === 'undefined')
minutes = ((new Date()).getTimezoneOffset() * (-1));
var localTime = new Date();
localTime.setMinutes(localTime.getMinutes() + minutes);
return localTime;
}
function getTimeShiftHours(hours) {
if (typeof hours === 'undefined')
hours = (new Date()).getTimezoneOffset() / (-60);
return getTimeShiftMinutes(hours * 60);
}
function parseDateToString(dateTime) {
return dateTime.getUTCDate().lpad(0, 2) + '.' + dateTime.getUTCMonth().lpad(0, 2) + '.' + dateTime.getUTCFullYear().lpad(0, 2);
}
function parseTimeToString(dateTime) {
return dateTime.getUTCHours().lpad(0, 2) + ':' + dateTime.getUTCMinutes().lpad(0, 2) + ':' + dateTime.getUTCSeconds().lpad(0, 2);
}
var timezoneUpdate = window.setInterval(function(){
// Jedes Listen-Element durchlaufen:
$.each($('.timezones li'), function(index, element){
// Zeitverschiebung in Stunden aus HTML-Attribut auslesen ...
var offset = parseFloat($(element).attr('data-offset'));
// ... und zugehörige (UTC-)Zeit heraussuchen:
var dateTimeZone = getTimeShiftHours(offset);
// Ergebnisse in passende Felder des Listen-Elementes schreiben:
$(element).find('.date').text(parseDateToString(dateTimeZone));
$(element).find('.time').text(parseTimeToString(dateTimeZone));
});
}, 500);
});
Der HTML-Code ist relativ flexibel. Theoretisch könnte man auch etwas anderes als eine Liste verwenden. Sehe gerade, dass im Skript dann nur der Selektor in $.each($('.timezones li') … noch angepasst werden müsste, falls keine LI-Elemente zum Einsatz kommen sollten. Hauptsächlich kommt es auf das Attribut data-offset und die Klassen date sowie time an. Sie bestimmen, welche Zeitzonen für die Element berechnet werden sollen und wo die Ergebnisse hingeschrieben werden.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- Liste mit verschiedenen Zeitzonen -->
<ul class="timezones">
<li data-offset="1">
<span class="location">Deutschland/Berlin</span>
<span class="date"></span>
<span class="time"></span>
</li>
<li data-offset="5.5">
<span class="location">Indien/Delhi</span>
<span class="date"></span>
<span class="time"></span>
</li>
<li data-offset="-10">
<span class="location">Hawaii/Honolulu</span>
<span class="date"></span>
<span class="time"></span>
</li>
</ul>
Ich habe hier keine Tabelle verwendet, da dabei viel struktureller Code hinzukommen und das Skript dann zu sehr darauf fixiert werden würde. Aber wie gesagt, der HTML-Code ist relativ flexibel anpassbar. Der Rest wird dann per CSS erledigt. Ich packe das ganze nochmals mit mehr Kommentaren und einem grundlegenden CSS-Gerüst zur Anzeige als horizontal angeordnete Kästen in den Anhang. Ränder, Positionierung, Abstände etc. sind alles nur noch eine Frage des Designs.
P.S.: Ich würde den Code gerne auch als Skript-Schnipsel im FoXum veröffentlichen. Dann haben auch andere was davon. Und eine Datumsberechnung sowie Funktionen zum Ergänzen führender Nullen kann man vielleicht auch mal wieder woanders brauchen.
Hallo Florian,
das ist mal wieder das super Hammer-Script!
Danke dafür. Sehr funktionstüchtig und kompakt. Einfach Klasse! Tolle Arbeit. 
Mir ist einiges aufgefallen:
Google Chrome und und FF hatten Schwierigkeiten das JQuery-Script zu laden, dauerte sehr lange (<script src="http://code.jquery.com/jquery-latest.min.js"></script>).
Da die Xobor-Template sowieso schon mit JQuery laufen, war das kein Problem (<script type="text/javascript" src="http://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>).
Aber.....
Ich wollte noch die Localzeit ausgeben, wie wir es bei unserer ersten Weltzeituhr schon hatten.
Hier: Weltzeituhr
Alles nicht so einfach.
• Hier sollte mit einem Div-Container waagerecht die Localzeit mit Wochentag und ausgeschriebenen Monat über die Weltzeituhr angezeigt werden. 
• Du hattest es schon angesprochen, dass der Sektor "$.each($('.timezones li')" angepasst werden müsste. Geht beides? "Div" und "LI"?
• Sind für die ausführlich dargestellte Localzeit, wie oben beschrieben, noch die üblichen Scripte notwendig (ohne Data-Objekt)?
Gibt es hier eine einfache Lösung, die das Script nicht unnötig vergrößert?
Mit besten Dank im Voraus
Gruß Wolfgang
Hi Wolfgang,
die jQuery-Skriptdatei wird in meiner Vorlage immer in aktuellster Version vom Server heruntergeladen. Manchmal dauert es evtl. länger, wenn die Server gerade ausgelastet sind oder die vorhandene Internet-Verbindung ohnehin nicht so schnell ist. In meiner Testseite muss ich es natürlich auch extra einbinden, allerdings entwickelt es sich damit leichter und schneller und stört auch nicht den Betrieb des Forums. Und eingesetzt habe ich jQuery, weil es im Forum ohnehin vorhanden ist und nicht noch als weitere Bibliothek erst eingebunden werden muss.
Wenn das Skript nicht nochmal geladen werden soll, musst du die Skript-Tags entweder weglassen oder mit HTML-Kommentaren umgeben. Denn die Doppel-Slashes kommentieren nur Zeilen innerhalb eines Skriptes aus. Die Skript-Tags selbst stehen aber im HTML-Bereich.
Wenn du nun zusätzlich noch die Lokalzeit ausgeben möchtest, kannst du dir die Werte aus den üblichen Funktionen der Date-Klasse herausgeben lassen. Das Manipulieren und Auslesen der UTC-Zeit war nur dazu da, weil es keine passende Methode für die Ausgabe der Uhrzeit einer anderen Zeitzone gab.
Wie ich schon beschrieben habe, wird intern ohnehin immer die UTC-Zeit (in Millisekunden) gespeichert. Erst bei der Ausgabe wird dann automatisch immer die aktuelle Zeitzone draufgerechnet. Also musst du nichts anderes tun, als zur aktuellen Uhrzeit die Stunden, Minuten und Sekunden sowie für das Datum Tag, Monat, Jahr und zusätzlich den Wochentag abzufragen. Dabei bekommst du immer die Werte für die Lokalzeit heraus.
Den aktuellen Monat und Wochentag erhälst du immer als Zahl, welche übrigens immer ab Null zu zählen beginnt. Das hatte ich vorher noch nicht bei der Datumsausgabe eingebaut, sodass statt dem 11. Monat eine 10 ausgegeben wird. Wenn beides als Text ausgegeben werden soll, musst du noch dafür sorgen, dass die entsprechende Zahl in einen Text übersetzt wird. Welche Zahl für welchen Wochentag/Monat steht kannst du z. B. in der JavaScript Date Reference nachlesen, dort sind alle möglichen Methoden der Date-Klasse gelistet.
Um die Lokalzeit letztlich in die Seite zu schreiben, brauchst du nur in der bestehenden Update-Routine den Inhalt des entsprechenden DIVs mit der aktuellen Uhrzeit (nach Umwandlung in einen gewünschten String) zu aktualisieren.
Hallo Florian,
mal wieder besten Dank für die vielen Info.
Das ich die Info-Zeile falsch auskommentiert habe, ist mir gar nicht aufgefallen. Danke, Danke!
Ich hatte auch durch das Ausprobieren, ein paar Zeilen zu viel im Script. Sorry! 
Habe ich bereits geändert!
Die Uhr läuft perfekt, jetzt auch mit Localzeit! Super!
Gruß
Wolfgang
Freut mich, dass es so gut klappt.
Noch als kleiner Nachtrag, bei der letzten Version habe ich $('.timezones li') durch $('.timezones [data-offset]') ersetzt. So wird nicht speziell nach einem Listen-Element gesucht, sondern jenen, welche das gewünschte dataAttribut enthalten. Bei nicht allzu komplizierten HTML-Strukturen muss so nicht jedesmal das Skript an die neuen HTML-Tags angepasst werden, solange die CSS-Klassen und das Attribut data-offset weiterhin passend gesetzt worden sind.
Ansonsten sind der Doctype, die Head- und Body-Tags sowie jQuery bereits im Forum vorhanden, sodass dort im Prinzip nur noch das eigentliche Skript und die HTML-Struktur für die Zeitzonen eingebaut werden müssen.