multiple Uhrzeit Liveanzeige (Weltzeituhr) – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self multiple Uhrzeit Liveanzeige (Weltzeituhr) Thu, 30 Jun 11 05:38:22 Z https://forum.selfhtml.org/self/2011/jun/30/multiple-uhrzeit-liveanzeige-weltzeituhr/1514153#m1514153 https://forum.selfhtml.org/self/2011/jun/30/multiple-uhrzeit-liveanzeige-weltzeituhr/1514153#m1514153 <p>Hallo zusammen,</p> <p>ich verzweifle an meinem Versuch, eine Tabelle mit den live-Uhrzeiten verchiedener Städte Weltweit zu erstellen. hier erstmal der code, den ich habe, erklärung folgt:</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">HTML</span> <span class="token name">PUBLIC</span> <span class="token string">"-//W3C//DTD HTML 4.01 Transitional//EN"</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Stations<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">function</span> <span class="token function">M07h</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> jetzt <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> Stunde <span class="token operator">=</span> jetzt<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> Stunde <span class="token operator">=</span> Stunde <span class="token operator">-</span> <span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span>Stunde <span class="token operator">></span> <span class="token number">23</span><span class="token punctuation">)</span><span class="token punctuation">{</span>Stunde <span class="token operator">=</span> Stunde <span class="token operator">-</span> <span class="token punctuation">(</span><span class="token number">24</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token keyword">if</span><span class="token punctuation">(</span>Stunde <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">{</span>Stunde <span class="token operator">=</span> <span class="token string">'0'</span><span class="token operator">+</span>Stunde<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token keyword">var</span> Minute <span class="token operator">=</span> jetzt<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> Minute <span class="token operator">=</span> Minute <span class="token operator">-</span> <span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span>Minute<span class="token operator">></span> <span class="token number">59</span><span class="token punctuation">)</span><span class="token punctuation">{</span>Minute <span class="token operator">=</span> Minute <span class="token operator">-</span> <span class="token punctuation">(</span><span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token keyword">if</span><span class="token punctuation">(</span>Minute <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">{</span>Minute <span class="token operator">=</span> <span class="token string">'0'</span><span class="token operator">+</span>Minute<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token keyword">var</span> Sekunde <span class="token operator">=</span> jetzt<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> Sekunde <span class="token operator">=</span> Sekunde <span class="token operator">-</span> <span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span>Sekunde<span class="token operator">></span> <span class="token number">59</span><span class="token punctuation">)</span><span class="token punctuation">{</span>Sekunde <span class="token operator">=</span> Sekunde <span class="token operator">-</span> <span class="token punctuation">(</span><span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token keyword">if</span><span class="token punctuation">(</span>Sekunde <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">{</span>Sekunde <span class="token operator">=</span> <span class="token string">'0'</span><span class="token operator">+</span>Sekunde<span class="token punctuation">;</span><span class="token punctuation">}</span> document<span class="token punctuation">.</span>M07hForm<span class="token punctuation">.</span>M07hInput<span class="token punctuation">.</span>value<span class="token operator">=</span> Stunde <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> Minute <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> Sekunde<span class="token punctuation">;</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token string">'M07h()'</span><span class="token punctuation">,</span><span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">P00h</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> jetzt <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> Stunde <span class="token operator">=</span> jetzt<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> Stunde <span class="token operator">=</span> Stunde <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span>Stunde <span class="token operator">></span> <span class="token number">23</span><span class="token punctuation">)</span><span class="token punctuation">{</span>Stunde <span class="token operator">=</span> Stunde <span class="token operator">-</span> <span class="token punctuation">(</span><span class="token number">24</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token keyword">if</span><span class="token punctuation">(</span>Stunde <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">{</span>Stunde <span class="token operator">=</span> <span class="token string">'0'</span><span class="token operator">+</span>Stunde<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token keyword">var</span> Minute <span class="token operator">=</span> jetzt<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> Minute <span class="token operator">=</span> Minute <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span>Minute<span class="token operator">></span> <span class="token number">59</span><span class="token punctuation">)</span><span class="token punctuation">{</span>Minute <span class="token operator">=</span> Minute <span class="token operator">-</span> <span class="token punctuation">(</span><span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token keyword">if</span><span class="token punctuation">(</span>Minute <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">{</span>Minute <span class="token operator">=</span> <span class="token string">'0'</span><span class="token operator">+</span>Minute<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token keyword">var</span> Sekunde <span class="token operator">=</span> jetzt<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> Sekunde <span class="token operator">=</span> Sekunde <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span>Sekunde<span class="token operator">></span> <span class="token number">59</span><span class="token punctuation">)</span><span class="token punctuation">{</span>Sekunde <span class="token operator">=</span> Sekunde <span class="token operator">-</span> <span class="token punctuation">(</span><span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token keyword">if</span><span class="token punctuation">(</span>Sekunde <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">{</span>Sekunde <span class="token operator">=</span> <span class="token string">'0'</span><span class="token operator">+</span>Sekunde<span class="token punctuation">;</span><span class="token punctuation">}</span> document<span class="token punctuation">.</span>P00hForm<span class="token punctuation">.</span>P00hInput<span class="token punctuation">.</span>value<span class="token operator">=</span> Stunde <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> Minute <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> Sekunde<span class="token punctuation">;</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token string">'P00h()'</span><span class="token punctuation">,</span><span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">AllTimes</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">M07h</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">P00h</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token special-attr"><span class="token attr-name">onload</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">AllTimes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>City<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Time<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Frankfurt<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>P00hForm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>P00hInput<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Houston<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M07hForm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M07hInput<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token comment"><!-- <tr><td>Kopenhagen</td><td><form name="P00hForm"><input name="P00hInput"></form></td></tr> --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>wenn ich die dritte Zeile aktiviere, die die glecihe Zeitfunktion verwendet wie die erste Zeile, funktioniert keine der Uhren mehr. ich wollte eine Liste mit etwa 30-40 Städten weltweit auflisten, es soll aber weiter auf html/css/javascript laufen, nicht unter einsatz von php/mysql</p> <p>wäre super, wenn jemand eine lösung für mich hätte</p> <p>greets flotschi</p> multiple Uhrzeit Liveanzeige (Weltzeituhr) Thu, 30 Jun 11 07:15:04 Z https://forum.selfhtml.org/self/2011/jun/30/multiple-uhrzeit-liveanzeige-weltzeituhr/1514155#m1514155 https://forum.selfhtml.org/self/2011/jun/30/multiple-uhrzeit-liveanzeige-weltzeituhr/1514155#m1514155 <p>Das dritte <form> hat den selben Namen wie das erste.</p> <p>Willst du für jede Zeitzone eine eigene Funktion schreiben? Nimm doch Parameter dafür.<br> Ich würde das JavaScript noch etwas lesbarer formatieren. Warum schreibst du die Zahlen in Klammern?</p> multiple Uhrzeit Liveanzeige (Weltzeituhr) Thu, 30 Jun 11 07:41:52 Z https://forum.selfhtml.org/self/2011/jun/30/multiple-uhrzeit-liveanzeige-weltzeituhr/1514154#m1514154 https://forum.selfhtml.org/self/2011/jun/30/multiple-uhrzeit-liveanzeige-weltzeituhr/1514154#m1514154 <p>Hallo,</p> <blockquote> <p>~~~html</p> </blockquote> <p><tr><td>Frankfurt</td><td><form name="P00hForm"><input name="P00hInput"></form></td></tr></p> <blockquote> <p><tr><td>Houston</td><td><form name="M07hForm"><input name="M07hInput"></form></td></tr><br> <!--  <tr><td>Kopenhagen</td><td><form name="P00hForm"><input name="P00hInput"></form></td></tr>  --></p> </blockquote> <pre><code class="block"> > wenn ich die dritte Zeile aktiviere, die die glecihe Zeitfunktion verwendet wie die erste Zeile, funktioniert keine der Uhren mehr. Ist klar, weil du dann zwei Formulare gleichen Namens hast, mit je einem Inputfeld gleichen namens, so dass bei der Anweisung >             `document.P00hForm.P00hInput.value = Stunde + ':' + Minute + ':' + Sekunde;`{:.language-javascript} nicht klar ist, welchen Element von welchem Formular angesprochen werden soll. Gruß, Don P </code></pre> multiple Uhrzeit Liveanzeige (Weltzeituhr) Thu, 30 Jun 11 12:23:15 Z https://forum.selfhtml.org/self/2011/jun/30/multiple-uhrzeit-liveanzeige-weltzeituhr/1514156#m1514156 https://forum.selfhtml.org/self/2011/jun/30/multiple-uhrzeit-liveanzeige-weltzeituhr/1514156#m1514156 <blockquote> <p>Das dritte <form> hat den selben Namen wie das erste.</p> <p>Willst du für jede Zeitzone eine eigene Funktion schreiben? Nimm doch Parameter dafür.<br> Ich würde das JavaScript noch etwas lesbarer formatieren. Warum schreibst du die Zahlen in Klammern?</p> </blockquote> <p>ich hätte vielleicht erwähnen sollen, dass ich der totale noob bin, was javascript und css angeht. die Informationen, die in dem Script drin sind, habe ich mir am WE erarbeitet, musste aber einen Teil der Informationen einfach akzeptieren, ohne sie zu verstehen.<br> die einzelnen Zeitzonen wollte ich tatsächlich als separate Funktion haben (insgesamt von -10 bis +10 Stunden - es sind also in meiner kompletten liste erheblich mehr) ich habe aber trotz intensiver suche keine andere Möglichkeit gefunden. Wenn es alternativen gibt, wäre ich für eine gescripteten Vorschlag sehr Dankbar.<br> Eine statische Liste mit einem metarefresher von einer Minute habe ich lauffähig bekommen, ich wollte aber den Luxus dieser live laufenden Uhr in jeder Zeile haben - einfach nur, weil es besser aussieht.</p> multiple Uhrzeit Liveanzeige (Weltzeituhr) Sat, 02 Jul 11 07:37:20 Z https://forum.selfhtml.org/self/2011/jun/30/multiple-uhrzeit-liveanzeige-weltzeituhr/1514157#m1514157 https://forum.selfhtml.org/self/2011/jun/30/multiple-uhrzeit-liveanzeige-weltzeituhr/1514157#m1514157 <blockquote> <p>die einzelnen Zeitzonen wollte ich tatsächlich als separate Funktion haben (insgesamt von -10 bis +10 Stunden</p> </blockquote> <p>Dann sei mal froh dass du nicht für die Regierung arbeitest und die Datenbank der Bundesbürger durchsuchen musst. Da für jeden ne eigene Funktion schreiben dürfte etwas Zeit kosten ;-)</p> <p>Nutze Parameter, da kannst du dann sowas wie M07hInput übergeben und die Funktion weiß dann was sie ansprechen muss.<br> Oder ruf die Funktion ein einziges mal auf und die setzt dann für alle Felder den Wert hintereinander.</p> <p>Zu deinem Code:</p> <blockquote> <p>var Stunde = Stunde - (7);<br> if(Stunde > 23){Stunde = Stunde - (24);</p> </blockquote> <p>-> Wenn du 7 abziehst, wird die Stunde sicher nicht > 23 sein sondern höchstens < 0.</p> <blockquote> <p>if(Stunde < 10){Stunde = '0'+Stunde;</p> </blockquote> <p>Du vermischst hier Zahlen und Strings. Ist in JS zwar möglich, aber ich finds nicht schön. Es gibt Funktionen um eine Zahl zu formatieren, weiß grad nicht auswendig aber schau mal unter Stringfunktionen oder so.</p> <blockquote> <p>var Minute = Minute - (0);</p> </blockquote> <p>Null abziehen? Und danach nochmal prüfen und wieder in den Bereich verschieben, den die Zahl nie verlässt? Lustig!</p> <p>Warum alle 200 ms updaten? Rechne dir doch aus wie lange am Ende der Funktion noch ist bis die Minute sich wieder ändert und nimm den Wert dann als Timeout.</p> <p>Also angenommen die Funktion ist 300 Millisekunden nach der vollen Minute fertig, dann warte noch 700 ms bis du wieder aktualisierst.</p>