JavaScript Counter soll Serverzeit verwenden

webdoktor

webdoktor

Angesehenes Mitglied
Hallo zusammen

Ich habe folgendes JavaScript welches mir einen Counter setzt bis um Mitternacht. Da JavaScript ja
Browserbasierend ist, ist es mir klar, dass wenn ich meine Systemzeit ändere, dass es dann den Counter
auch ändert.

Wie mach ich aber, dass es bei einem Refresh wieder die Serverzeit nimmt als Richtzeit. Ich habe schon
diverse Anpassungen versucht, leider ohne Erfolg.

Hier der Code:

CODE <html><head><title>Countdown</title>


<script language="JavaScript">

<!-- Hier folgt das kurze, kommentierte Javascript für die Zeitanzeige:


function clock() {

var Zeit = new Date();
var Stunden = 23-Zeit.getHours();
var Minuten = 59-Zeit.getMinutes();
var Sekunden = 60-Zeit.getSeconds();
if (Sekunden==60) {Minuten = Minuten+1;Sekunden=0;} //Um Berechnungsfehler
if (Minuten==60) {Stunden = Stunden+1;Minuten=0}    //auszugleichen
var Tag  = Zeit.getDate();
var Monat = Zeit.getMonth()+1;

if (Stunden == 0) Stunden = "00";
if (Stunden <= 9 && Stunden != "00") Stunden = "0"+Stunden;
if (Minuten <= 9) Minuten = "0" + Minuten;
if (Sekunden <= 9) Sekunden = "0" + Sekunden;

if (Tag <= 9) Tag = "" + Tag;
if (Monat <= 9) Monat = "0" + Monat;

var TZeit = Stunden + ":" + Minuten + ":" + Sekunden;
var TDatum = Tag + "." + Monat + ".";

if (TDatum=="22.03.") Uhrzeit.innerHTML="Datum erreicht!"
else Uhrzeit.innerHTML = TZeit;

setTimeout("clock()", 1000);
}

//Ende des Scripts -->
 
 </script>



<link href="css/style.css" rel="stylesheet" type="text/css">
</head>



<body onLoad="clock()">
 <span id="Uhrzeit">00:00:00</span>



</body></html>


Ich freue mich über jeden Tipp von Euch!
Gruss Marco
 
CODE var Zeit = new Date(<?php echo time(); ?>);


sollte funktionieren..


gruß
Karsten
 
@KarstenS: Prinzipiell hast du schon recht, jedoch hast da was übersehen. Nach seinem Script wird jede Sekunde die Funktion "Clock" neu aufgerufen und somit die Variable "Zeit" neu eingelesen. Und damit bleibt der Count stehen.

@webdoctor:
Server-Datum plus -Zeit via PHP einer JS Date-Function mitgeben, funkt wie folgt:
CODE ...var ServerDate = new Date("<? echo date("M d, Y H:i:s"); ?>"); ...

Ergibt für den Client folgendes: ...var ServerDate = new Date("Mar 16, 2008 18:35:23"); ...

Jedoch hast du dann wie bereits erwähnt bei deinem Script das Problem, dass die Uhr jede Sekunde wieder auf diesen vom Server errechneten Wert zurück kehrt. Dieses Problem löst man wie folgt:

Die Variable "Zeit ist ausserhalb der Funktion zu definiert. Zuglich wird ausserhalb der Funktion auch noch eine weitere Variable "ServSec" deklariert und mit dem Sekunden-Wert von "Zeit" indiziert.

CODE var Zeit = new Date("<? echo date("M d, Y H:i:s"); ?>");
var ServSec = Zeit.getSeconds();

Die erste Zeile in der Clock-Function "var Zeit = ..." ist zu entfernen.

In der Clock-Function ist die Variable "ServSec" zu inkrementieren und der neue Wert des Objektes "Zeit" hinzu zufügen. Dies gleich bevor mittels setTimeout(..); die Funktion erneut aufgerufen wird.

CODE ServSec++;
if (ServSec > 60) { ServSec = 1; }
Zeit.setSeconds(ServSec);

("ServSec" ist bei grösser als 60 auf 1 zurück zu stufen, da ansonsten bei einem Minutenwechsel die Minuten als Sekunden zählen.)

Das ganze sieht dann wie folgt aus:
(Muss jetzt natürlich als eine PHP-Datei gespeichert werden)

CODE <html><head><title>Countdown</title>


<script language="JavaScript">

<!-- Hier folgt das kurze, kommentierte Javascript für die Zeitanzeige:

// === Add by WaK === Start ===
var Zeit = new Date("<? echo date("M d, Y H:i:s"); ?>");
var ServSec = Zeit.getSeconds();
// === Add by WaK === End ===

function clock() {

// === Delete by WaK === Start ===
// var Zeit = new Date();
// === Delete by WaK === End ===

var Stunden = 23-Zeit.getHours();
var Minuten = 59-Zeit.getMinutes();
var Sekunden = 60-Zeit.getSeconds()-1; // === Add "-1" by WaK

// === Delete by WaK === Start ===
// if (Sekunden==60) {Minuten = Minuten+1;Sekunden=0;} //Um Berechnungsfehler
// if (Minuten==60) {Stunden = Stunden+1;Minuten=0} //auszugleichen
// === Delete by WaK === End ===

// === Add by WaK === Start ===
if (Sekunden==60) { Sekunden=0; }
if (Minuten==60) { Minuten=0; }
// === Add by WaK === End ===

var Tag = Zeit.getDate();
var Monat = Zeit.getMonth()+1;

if (Stunden == 0) Stunden = "00";
if (Stunden <= 9 && Stunden != "00") Stunden = "0"+Stunden;
if (Minuten <= 9) Minuten = "0" + Minuten;
if (Sekunden <= 9) Sekunden = "0" + Sekunden;

if (Tag <= 9) Tag = "" + Tag;
if (Monat <= 9) Monat = "0" + Monat;

var TZeit = Stunden + ":" + Minuten + ":" + Sekunden;
var TDatum = Tag + "." + Monat + ".";

if (TDatum=="22.03.") Uhrzeit.innerHTML="Datum erreicht!"
else Uhrzeit.innerHTML = TZeit;

// === Add by WaK === Start ===
ServSec++;
if (ServSec > 60) { ServSec = 1; }
Zeit.setSeconds(ServSec);
// === Add by WaK === End ===

setTimeout("clock()", 1000);
}

//Ende des Scripts -->

</script>



<link href="css/style.css" rel="stylesheet" type="text/css">
</head>



<body onLoad="clock()">
<span id="Uhrzeit">00:00:00</span>



</body></html>


Da die Serverzeit nur bei einem Reload aktualisiert wird, schlage ich dir vor ein Page-Refresh auf etwa alle 10 bis 20 Minuten zu setzen. Denn der Counter ist vorallem bei langsamen Rechnern mit dieser Methode schnell ungenau.

Hilft das soweit?
 
Hallo Kilian

Ich habe über zwei Stunden versucht genau das Ergebnis zu programmieren.
Wow, dank Deiner Hilfe hat es jetzt geklappt. Ich möchte Dir von herzen Danken
für Deine Bemühungen und Deine super ausführlichen Beschreibung. Solche Hilfe
ist für mich überhaupt nicht selbstverständlich und ich bin Dir wirklich dankbar!

Vielen Dank!

Ich merke, Du bist ein kleiner JavaScript Profil. Weil ich hatte genau das Problem,
dass ich zwar die Zeit von dem Server hatte aber der Countdown stehengeblieben
ist. Jupii jetzt aber ist alles genau so wie ich es mir wünschte.

Gruss Marco
 
Hallo Kilian

Gerade habe ich bemerkt, dass der Counter im FireFox nicht
funktioniert :-(

Hast Du eine Idee an was es liegen könnte?

LG Marco
 
Lass das Script genau so wie hier gepostet als eine Datei laufen, dann siehst du, dass es auch im Firefox läuft.

Auf deiner Seite bindest du ja noch drei weitere JS-Files ein. Überprüfe ob nicht allenfalls Variablen- , Funktions-Namen etc. bereits von anderen Scripts verwendet werden. Allenfalls wird eine oder mehrere JS-Aktionen (der anderen Scripts) von einigen Browser nicht tolleriert und führen zum Abbruch der JS Durchführung. Gehe Schritt für Schritt durch deine Scripts und setze Haltepunkte mittels alert();.

Mit der Haltepunkt-Variante und den Richtigen Ausgaben durch alerts solltest du die Fehler schnell finden.

PS: Ich würde sowieso darauf achten, dass du dich möglichst den W3C-Standards entlang bewegst. Denn der Counter auf deiner Seite wird sowohl vom Iceweasel als auch dem Epiphany nicht ausgeführt. Funktioniert es denn im IE (kann das nur sehr schlecht testen)?
 
Ach ne. Ist mir gerade aufgefallen. Du lädst das Script im HTML-Body. Somit wird beim Onload eine Funktion aufgerufen, die noch gar nicht existiert. Verschiebe das Script in den HTML-Head. Sollte es dann trotzdem noch nicht funktionieren, benutze das Vorgehen des vorherigen Posts.

Du kannst das Script auch in eine separate PHP Datei legen und dann wie folgt einbinden.
CODE <script type="text/javascript" language="javascript" src="jscounter.php"></script>


Beachte dann, dass das PHP-File noch vor der ersten Ausgabe den Header auf den FileTyp JS setzt:

CODE Header("content-type: application/x-javascript");
 
Hallo zusammen,

ich wollte fragen ob ich diesen Counter für meine Homepage benutzen darf ?

Und wenn ja wie kann ich das Ablaufdatum mit Uhrzeit einstellen ?

Gruß
Brillo
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben