Ideen f�r Skripte und sonstige Quellcodes » Weltzeituhr

Florians Forum � Webmaster � Ideen f�r Skripte und sonstige Quellcodes � Weltzeituhr - Halbe Stunden

Themen-Einstellungen

Thema drucken

Bereich wechseln

#1 | Weltzeituhr - Halbe Stunden datum

18.11.2014 13:01 (zuletzt bearbeitet: 18.11.2014 13:12)

Wolfgang

Informationen anzeigen

Beitr�ge:	278
Punkte:	1169
Registriert seit:	17.01.2008

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

1
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>
 

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#2 | RE: Weltzeituhr - Halbe Stunden datum

22.11.2014 20:32

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

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:

1
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:

1
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.

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#3 | RE: Weltzeituhr - Halbe Stunden datum

25.11.2014 00:56 (zuletzt bearbeitet: 25.11.2014 01:02)

Wolfgang

Informationen anzeigen

Beitr�ge:	278
Punkte:	1169
Registriert seit:	17.01.2008

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

1
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

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#4 | RE: Weltzeituhr - Halbe Stunden datum

25.11.2014 23:04

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.

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#5 | RE: Weltzeituhr - Halbe Stunden datum

27.11.2014 01:13 (zuletzt bearbeitet: 27.11.2014 01:17)

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

Hi Wolfgang,
ich habe das mal beispielhaft so wie vorgeschlagen kombiniert.

Dabei kam folgendes Skript heraus:

1
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.

1
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.

florian-zier hat folgende Dateien an diesen Beitrag angeh�ngt

timezones.zip

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#6 | RE: Weltzeituhr - Halbe Stunden datum

29.11.2014 14:59

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

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#7 | RE: Weltzeituhr - Halbe Stunden datum

29.11.2014 17:27

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.

florian-zier hat folgende Dateien an diesen Beitrag angeh�ngt

timezones.zip

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#8 | RE: Weltzeituhr - Halbe Stunden datum

30.11.2014 11:14 (zuletzt bearbeitet: 30.11.2014 12:18)

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

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#9 | RE: Weltzeituhr - Halbe Stunden datum

30.11.2014 17:46 (zuletzt bearbeitet: 30.11.2014 17:47)

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.

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

Lupenfunktion in der Bildergalerie � � Spoiler mit gegenseitiger Auslösung

�hnliche Themen

Antworten

Letzter Beitrag

Hintergrundwechsler für Uhrzeiten
Erstellt im Forum Homepage & Anderes von florian-zier 0 28.09.2011 20:23
florian-zier • Zugriffe: 707
Tabellen aus Fußballmanager in Excel
Erstellt im Forum Sonstiges von rudir1962 6 31.03.2010 09:52
rudir1962 • Zugriffe: 1164
Forum für Astronomie und Raumfahrt
Erstellt im Forum Werbung von Drago 0 18.10.2009 19:36
Drago (Gast) • Zugriffe: 501
Nano-Wurm zur Tumor-Bekämpfung
Erstellt im Forum News von florian-zier 1 13.11.2008 12:49
Emanuel • Zugriffe: 765
Firefox bricht Rekord
Erstellt im Forum News von florian-zier 0 05.07.2008 15:01
florian-zier • Zugriffe: 493
Racing en Ligue 1
Erstellt im Forum Sonstiges von Calli 4 03.08.2007 17:34
Calli • Zugriffe: 1291

Bitte geben Sie einen Grund f�r die Verwarnung an