Probleme mit der Javascript Uhr

[Dirk]

Hallo,

vieleicht kann mir hier einer bei meinem Problem helfen.
Ich würde gerne auf meine Homepage drei Uhren mit unterschiedlichen Zeiten anzeigen lassen.
Leider wird nur die Uhrzeit von der ersten Uhr angezeigt und ich weiß auch nicht wie ich die Zeitverschiebung von Dubai mit + 3Std. und Shanghai mit +7 Std. einbinden muss.
Zu meine Schande muss ich gestehen, das ich nicht Programmieren kann.

Für die Hilfe bedanke ich mich schon mal im voraus.

Dirk

Diese Script habe ich zur Zeit auf meiner Seite:

<p>Deutschland</p>
<script language="JavaScript">
<!--
function Uhr_anzeigen(){
var Datum = new Date()
var std = Datum.getHours()
var min = Datum.getMinutes()
var sec = Datum.getSeconds()
Zeit = ((std < 10) ? " 0" : " ") + std
Zeit += ((min < 10) ? ":0" : ":") + min
Zeit += ((sec < 10) ? ":0" : ":") + sec
Zeit += " Uhr"
document.uhr.zeit.value = Zeit
timerid = setTimeout("Uhr_anzeigen()",1000)
}-8
// -->
</script>
<form NAME="uhr">
<input TYPE="text" NAME="zeit" SIZE=10 VALUE ="">
</form>
<SCRIPT LANGUAGE="JavaScript">
//<!--
Uhr_anzeigen();
//-->
</SCRIPT>
------------------------------</p>
                    <p>Dubai</p>
     <script language="JavaScript">
<!--
function Uhr_anzeigen(){
var Datum = new Date()
var std = Datum.getHours()+8
var min = Datum.getMinutes()
var sec = Datum.getSeconds()
Zeit = ((std < 10) ? " 0" : " ") + std
Zeit += ((min < 10) ? ":0" : ":") + min
Zeit += ((sec < 10) ? ":0" : ":") + sec
Zeit += " Uhr"
document.uhr.zeit.value = Zeit
timerid = setTimeout("Uhr_anzeigen()",1000)
}-8
// -->
</script>
<form NAME="uhr">
<input TYPE="text" NAME="zeit" SIZE=10 VALUE ="">
</form>
<SCRIPT LANGUAGE="JavaScript">
//<!--
Uhr_anzeigen();
//-->
</SCRIPT>
------------------------------</p>
<p>Shanghai / Hong Kong </p>
<script language="JavaScript">
<!--
function Uhr_anzeigen(){
var Datum = new Date()
var std = Datum.getHours()
var min = Datum.getMinutes()
var sec = Datum.getSeconds()
Zeit = ((std < 10) ? " 0" : " ") + std
Zeit += ((min < 10) ? ":0" : ":") + min
Zeit += ((sec < 10) ? ":0" : ":") + sec
Zeit += " Uhr"
document.uhr.zeit.value = Zeit
timerid = setTimeout("Uhr_anzeigen()",1000)
}-8
// -->
</script>
<form NAME="uhr">
<input TYPE="text" NAME="zeit" SIZE=10 VALUE ="">
</form>
<SCRIPT LANGUAGE="JavaScript">
//<!--
Uhr_anzeigen();
//-->
</SCRIPT>

[Der Martin]

Hallo,

Leider wird nur die Uhrzeit von der ersten Uhr angezeigt ...

<script language="JavaScript">
<!--

das hast du bestimmt in irgendeinem Antiquariat gefunden. Das language-Attribut kannst du streichen, dafür fehlt das erforderliche type="text/javascript". Den HTML-Kommentar kannst du auch weglassen. Der hilft nichts, aber es gibt Situationen, wo er Probleme machen könnte.

function Uhr_anzeigen(){
function Uhr_anzeigen(){
function Uhr_anzeigen(){

Wenn du dreimal eine Funktion mit demselben Namen definierst und sie irgendwann mit Uhr_anzeigen() aufrufst, welche von den drei Funktionen wird dann wohl gemeint sein?

<form NAME="uhr">
<input TYPE="text" NAME="zeit" SIZE=10 VALUE ="">
</form>

Hier ist mir unklar, warum du das Textfeld in ein Formular packst - und wieder drei Formulare mit identischen Namen benutzt. Damit ist ja auch die Adressierung der Felder über document.uhr.zeit nicht mehr eindeutig.

und ich weiß auch nicht wie ich die Zeitverschiebung von Dubai mit + 3Std. und Shanghai mit +7 Std. einbinden muss.
Zu meine Schande muss ich gestehen, das ich nicht Programmieren kann.

Das ist schade, aber keine Schande.  ;-)
Nur sollte man in der Unkenntnis nicht davon ausgehen, dass man durch einfaches Zusammenkleben verschiedener Code-Fragmente wieder etwas Funktionierendes bekommt.

Also langsam. Du brauchst eine Funktion, die für verschiedene Zeitzonen die Uhrzeit bestimmt. Also wäre es doch naheliegend, die Zeitzone (Offset in Stunden gegen UTC) als Argument zu übergeben. Innerhalb der Funktion müssen wir dann zunächst die aktuelle Systemzeit in UTC ermitteln, und dann auf die gewünschte Zeitzone umrechnen.

function Uhr(zeitzone)
 { var Datum = new Date();                    // ergibt Datum in lokaler Zeitzone
   Datum -= Datum.getTimezoneOffest()*60000;  // normiert Datum auf UTC
   Datum += zeitzone*60*60000;                // verschiebt auf gewünscht Zeitzone
                                              // weiter wie bisher

Zur Erläuterung: Mit new Date() lesen wir die aktuelle Systemzeit aus, die aber auf die Zeitzone des Client-Rechners bezogen ist. Die rechnen wir jetzt auf UTC um, indem wir mit getTimezoneOffset() die Zeitverschiebung gegen UTC abfragen und subtrahieren. Da getTimezoneOffset() einen Wert in Minuten zurückliefert, das Date-Objekt aber in Millisekunden "denkt", müssen wir den erhaltenen Wert mit 60*1000 multiplizieren. Im zweiten Schritt rechnen wir den erhaltenen Zeitstempel nun auf die gewünschte Zeitzone um. Das Prinzip ist dasselbe - eine simple Addition. Da ich vergeschlagen habe, die Zeitzone als Anzahl der *Stunden* gegen GMT zu übergeben, müssen wir hier mit 60*60*1000 multiplizieren, um auf die Millisekunden zu kommen.

document.uhr.zeit.value = Zeit

Das würde ich so nicht machen. Gib lieber den zusammengebauten String als Funktionsergebnis zurück:

return (Zeit);

timerid = setTimeout("Uhr_anzeigen()",1000)

Und auch das (das zyklische Wieder-Aufrufen) würde ich außerhalb der Funktion veranlassen. Lass das hier erstmal weg.

}-8

Was soll übrigens das "-8" nach der abschließenden Funktionsklammer? Weg damit! Wir haben also bis jetzt eine Funktion, die man mit Uhr(t) aufrufen kann, und die uns als Ergebnis die Uhrzeit für die Zeitzone t (Stunden gegen UTC) zurückliefert. Fein.

Jetzt kannst du im HTML-Code die Textfelder vorsehen. Ich gebe ihnen im Beispiel mal allen den gleichen Namen, obwohl ich das bei dir erst kritisiert habe. Ich komme auch gleich nochmal darauf zurück.

<p><label>Mitteleuropa:</label><input type="text" name="zeit"></p>
<p><label>Dubai:</label>       <input type="text" name="zeit"></p>
<p><label>Shanghai:</label>    <input type="text" name="zeit"></p>

Nun fehlt uns "nur" noch die Kontroll-Logik. Hier spreche ich übrigens die gleichnamigen input-Elemente an, indem ich mit getElementsByName() erst ein Array erhalte, in dem alle Elemente dieses Namens vertreten sind, und sie dann über den Index [0..n] auswähle.

function UhrenAnzeigen()
 { var inputs = document.getElementsByName("zeit");
   inputs[0].value = Uhr(+1);  // Uhrzeit für Mitteleuropa
   inputs[1].value = Uhr(+3);  // Uhrzeit für Dubai
   inputs[2].value = Uhr(+7);  // Uhrzeit für Shanghai
   setTimeout("UhrenAnzeigen()", 500);
 }

Zum Schluss noch dafür sorgen, dass nach dem Laden des Dokuments die Funktionen auch einmal angestoßen werden:

window.onload = UhrenAnzeigen;

Eine generelle Sache ist mir noch aufgefallen: In Javascript ist es in vielen Fällen erlaubt, das Semikolon am Ende einer Anweisung wegzulassen, wenn es mit einem Zeilenumbruch zusammenfällt. Um Ärger zu vermeiden, empfehle ich trotzdem, konsequent Semikola zu setzen.

Außerdem empfehle ich dir noch, zum Verständnis der Funktionsweise die einzelnen Funktionen, Methoden und Objekte im JS-Kapitel von SELFHTML nachzulesen.

Schönen Sonntag noch,
 Martin

[Dirk]

Erst einmal vielen Dank für deine schnelle Antwort.

Das Script habe ich im Internet gefunden und habe natürlich gehofft, das ich nur Fragmente zusammen setzten muss.

Soweit habe ich deine guten Ausführungen verstanden.
Ich habe jetzt nach deiner Erklärung versucht, das Script zu ändern aber leider habe ich wohl noch Fehler gemacht. Ich würde mich sehr freuen, wen Du mir noch einmal helfen könntest.

Gruß Dirk

<body>

<script type="text/javascript">

function Uhr(zeitzone)
{ var Datum = new Date();
Datum -= Datum.getTimezoneOffest()*60000;
Datum += zeitzone*60*60000;

var std = Datum.getHours()
var min = Datum.getMinutes()
var sec = Datum.getSeconds()

Zeit = ((std < 10) ? " 0" : " ") + std
Zeit += ((min < 10) ? ":0" : ":") + min
Zeit += ((sec < 10) ? ":0" : ":") + sec
Zeit += "Uhr"

return (Zeit);

</script>

<p><label>Mitteleuropa:</label><input type="text" name="zeit"></p>
<p><label>Dubai:</label>    <input type="text" name="zeit"></p>
<p><label>Shanghai:</label>    <input type="text" name="zeit"></p>

<script type="text/javascript">

function UhrenAnzeigen()
 { var inputs = document.getElementsByName("zeit");
   inputs[0].value = Uhr(+1);
   inputs[1].value = Uhr(+3);
   inputs[2].value = Uhr(+7);
   setTimeout("UhrenAnzeigen()", 500);
 }

window.onload = UhrenAnzeigen;

</SCRIPT>

</body>

[rfb]

Moin

versuche:

<html>  
<head>  
<title>Test</title>  
<script type="text/javascript">  
function Uhr(zeitzone) {  
var Datum = new Date();  
Datum -= Datum.getTimezoneOffset()*60000;  
Datum = new Date(Datum+zeitzone*60*60000);  
var std = Datum.getHours();  
var min = Datum.getMinutes();  
var sec = Datum.getSeconds();  
var Zeit = ((std < 10) ? " 0" : " ") + std;  
Zeit += ((min < 10) ? ":0" : ":") + min;  
Zeit += ((sec < 10) ? ":0" : ":") + sec;  
Zeit += "Uhr";  
return Zeit;  
}  
function UhrenAnzeigen() {  
 var inputs = document.getElementsByName("zeit");  
 inputs[0].value = Uhr(+1);  
 inputs[1].value = Uhr(+3);  
 inputs[2].value = Uhr(+7);  
}  
  
window.onload=function() {  
 setInterval("UhrenAnzeigen()", 500);  
}  
</script>  
</head>  
<body>  
<form action="javascript:void(0)">  
<p><label>Mitteleuropa:</label><input type="text" name="zeit"></p>  
<p><label>Dubai:</label>    <input type="text" name="zeit"></p>  
<p><label>Shanghai:</label>    <input type="text" name="zeit"></p>  
</form>  
</body>  
</html>

in den Datumsmanipulationszeilen waren ein paar Fehler (1 Tippfehler, außerdem musstest du ein neues Date-Object nach den Rechenoperationen erzeugen, Alternative wären Manipulationen mit Methoden des Date-Objects gewesen), außerdem solltest du JavaScript komplett in den Head-bereich setzen. Das form-Tag ist übrigens - im Gegensatz zur Meinung von Der Martin - zwingend notwendig, wenn du Formularelemente nutzt.

Gruß
rfb

[Gunnar Bittersmann]

Hello out there!

Das form-Tag ist übrigens - im Gegensatz zur Meinung von Der Martin - zwingend notwendig, wenn du Formularelemente nutzt.

Nope, isses nicht. Siehe http://de.selfhtml.org/html/referenz/elemente.htm#input.

Da Raussuchen der Regeln aus der DTD überlasse ich dir.

See ya up the road,
Gunnar

[rfb]

Moin

Nope, isses nicht. Siehe http://de.selfhtml.org/html/referenz/elemente.htm#input.

sorry, nehme (fast) alles zurück (manchmal ist das W3C doch herrlich inkonsequent).

Gruß
rfb

[Dirk]

Von mir noch mal ein ganz lieben Dank an Euch beiden.

Gruß Dirk

[Gunnar Bittersmann]

Hello out there!

Ich würde gerne auf meine Homepage drei Uhren mit unterschiedlichen Zeiten anzeigen lassen.

Wer braucht das?

Du kannst dir ja mal meine Weltzeituhr und diesen Thread ansehen.

See ya up the road,
Gunnar