Anzeige - [Hier werben / Mediadaten]
(?) Tags raten (?) (edit)
 
Reply to this topicStart new topicStart Poll
Diskussion

JavaScript Counter soll Serverzeit verwenden

Wie mach ich das?

Thema abonnieren | Thema versenden | Thema drucken
webdoktor
G-Design Websolutions
Geschrieben am: Mo 16.03.2009, 15:59
Report PostQuote Post

AyomRank 6
************

Gruppe: Member (aktiv)
Beiträge: 677
Mitglied seit: 16.12.2005
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
Top
PMEmail PosterUsers Website
Top
 
 
#2 Geschrieben am: Mo 16.03.2009, 16:41 (+00:41)
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 99
Mitglied seit: 24.09.2006
CODE
var Zeit = new Date(<?php echo time(); ?>);


sollte funktionieren..


gruß
Karsten
Top
PMEmail Poster
Top
 
Kilian Waser
#3 Geschrieben am: Mo 16.03.2009, 20:22 (+03:41)
Report PostQuote Post

AyomRank 6
Group Icon

Gruppe: Moderatoren
Beiträge: 597
Mitglied seit: 6.02.2004
@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?


--------------------
Projektübersicht : Geekweb.org
Top
PMEmail PosterUsers Website
Top
 
webdoktor
G-Design Websolutions
#4 Geschrieben am: Mo 16.03.2009, 21:15 (+00:52)
Report PostQuote Post

AyomRank 6
************

Gruppe: Member (aktiv)
Beiträge: 677
Mitglied seit: 16.12.2005
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
Top
PMEmail PosterUsers Website
Top
 
webdoktor
G-Design Websolutions
#5 Geschrieben am: Mo 16.03.2009, 22:23 (+01:08)
Report PostQuote Post

AyomRank 6
************

Gruppe: Member (aktiv)
Beiträge: 677
Mitglied seit: 16.12.2005
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
Top
PMEmail PosterUsers Website
Top
 
Kilian Waser
#6 Geschrieben am: Mo 16.03.2009, 23:37 (+01:13)
Report PostQuote Post

AyomRank 6
Group Icon

Gruppe: Moderatoren
Beiträge: 597
Mitglied seit: 6.02.2004
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)?


--------------------
Projektübersicht : Geekweb.org
Top
PMEmail PosterUsers Website
Top
 
Kilian Waser
#7 Geschrieben am: Mo 16.03.2009, 23:51 (+00:14)
Report PostQuote Post

AyomRank 6
Group Icon

Gruppe: Moderatoren
Beiträge: 597
Mitglied seit: 6.02.2004
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");


--------------------
Projektübersicht : Geekweb.org
Top
PMEmail PosterUsers Website
Top
 
Thema wird von 0 Benutzer(n) gelesen (0 Gäste und 0 anonyme Benutzer)
0 Mitglieder:
« Browsergame gesucht | Programmierung Allgemein | mod_rewrite und joomla »
Trackback-Url: http://www.ayom.com/track/t/28748
Dieses Thema abonnieren

Topic Options Reply to this topicStart new topicStart Poll

 


> Ähnliche Themen
Themen Titel Autor Views Antworten Letzte Aktion
IpCounter Alternative -> Counter-City.de SZiebeck 73 0 Do 18.03.2010, 12:41
Diskussion: Counterservice - Gute Counter? Ayom-Team 2669 22 Do 18.03.2010, 12:04
Text soll scrollbar sein aber ohne scrollbar... ;) Klegs 92 3 Fr 12.03.2010, 11:29
FadeIn / FadeOut JavaScript steffi 184 2 Di 2.02.2010, 17:44
[s] javascript und wp profi?! Basti24 136 0 Mi 11.11.2009, 20:05
Hilfe zu HTML und Javascript weiterleiten jano20 204 1 Di 3.11.2009, 15:43
Problem mit Download-Counter Rubu 122 2 Mo 26.10.2009, 10:28
Kleiner Programmierauftrag PHP/JavaScript zu verge kfz-wert.info 380 1 Mo 31.08.2009, 19:15




Anzeige - [Hier werben / Mediadaten]



Anzeigen


[Hier werben / Mediadaten]