Php/Javascript: Timer, der nach Aktualisierung der seite nicht neu läd, sondern erst nach ablauf
Hallo liebe leute,
ich habe schon sehr viel gegoogelt, aber nichts von dem hat funktioniert. Ich brauche einen Countdown, der wenn man die Seite aktualisiert weiterläuft, aber nach ablauf automatisch, die seite neu läd.
hier ist mal der Code für den countdown, den ich benutzt habe:
<script type = "text/javascript">
var timeInSecs; var ticker;
function startTimer(secs) { timeInSecs = parseInt(secs); ticker = setInterval("tick()", 1000); }
function tick( ) { var secs = timeInSecs; if (secs > 0) { timeInSecs--; }
var hours= Math.floor(secs/3600); secs %= 3600; var mins = Math.floor(secs/60); secs %= 60; var pretty = ( (hours < 10 ) ? "0" : "" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins + ":" + ( (secs < 10) ? "0" : "" ) + secs; document.getElementById("countdown").innerHTML = pretty; }
startTimer(1000); // 48 hours in seconds
Was müsste ich einbauen, damit das geht?
gruß, Benjamin
3 Antworten
In Javascript ist das leider nicht möglich, da Javascript keine Speicherfunktionen hat. In deinem Fall würde ich das wohl in der sessionvariable von PHP schreiben und dann ist auch keine Datenbank nötig. (ich gehe jetzt mal davon aus, das jeder user nen eigenen Countdown haben soll).
noch eine anmerkung: for <?php darf kein HTML-Code stehen oder sonstige Dinge die Sachen zum Browser übertragen, da ansonsten die Session mit session_start(); nicht gestartet werden kann. Also diese beiden Zeilen am besten ganz oben ins Skript schreiben.
<?php
// Session starten
session_start();
// Länge des Timers bestimmen (besser als magic numbers im code)
$timer_sec = 1000;
// Aktuelle Uhrzeit laden (verhindert, das bei der Anzahl der Sekunden -1 rauskommt, falls der Countdown während der ausführung des Scripts abläuft
$time = time();
// Überprüfen ob timer gestartet wurde
if(!isset($_SESSION['countdown'])){
// Wenn timer nicht gestartet wurde, aktuelle Zeit speichern und anzahl der sekunden setzen
$_SESSION['countdown'] = $time;
$secs = 1000;
}
// Falls Timer gestartet worden ist
else{
// Wenn countdown abgelaufen countdown auf 0 setzen
if(($time - $_SESSION['countdown']) >= $timer_sec){
$secs = 0;
}
// Ansonsten auf restzeit setzen
else{
$secs = $time - $_SESSION['countdown'];
}
}
?>
Irgendwann später kommt dann dein Javaskript, in dem du folgende Zeile abändern musst.
startTimer(1000);
startTimer(<?php echo $secs; ?>);
Vielen Dank für deine Antwort! Werde es später sofort ausprobieren. Ich habe es bis jetzt nur geschafft, einen Timer mit Cookies zu erstellen. Hat jedoch den großen Nachteil, dass er zum einen verzögert, wenn man den browser neuläd und wenn man das Fenster schließt nicht weiterläuft.
Könnte man theoretisch auch eine Kombination aus Javascript und php machen? Also dass wenn man das Fenster schließt, php zum EInsatz kommt?
sorry, hatte einen kleinen logikfehler drin.
im letzten else-zweig:
statt
$secs = $time - $_SESSION['countdown'];
muss
$secs = $timer_sec - ($time - $_SESSION['countdown']);
Das Problem bleibt leider das selbe.. Wenn ich die Seite neu lade, startet der Countdown wieder von neu :( Hast du vielleicht eine andere Kontaktmöglichkeit?
Ich glaube, es geht mit php nur, wenn man die Zeit in einer Datenbank zwischenspeichert. Kennst du dich damit aus und kannst mir vieleicht etwas helfen dabei?
hier ist mal meine Email-Adresse: contact@dinobitco.in Ich glaube wir können uns so besser austauschen.
du musst den php-Teil direkt an erster stelle von deiner Datei schreiben, weil ansonsten die Session nicht gestartet werden kann.
Supiiiiii, ich habs hinbekommen :)) Hatte den div code nicht im body stehen. Jetzt läuft es wunderbar und soagar, wenn man die Seite schließt oder neuläd :) Hätte ich gewusst, dass es so einfach ist. Habe mit den Cookies bestimmt 3 Stunden rumgewerkelt :D Hast dir die hilfreichste Antwort verdient!
Zu früh gefreut :( Es ging, aber nur einmal. Jetzt startet er immer wieder bei 5 minuten beim aktualisieren :(
hier habe ich mal ne testseite gemacht: http://www.bitproject.hostingforfree.ml/
Vielleicht kannste dir ja mal den Quelltext anschauen, ob da irgendein fehler drin ist...
sehe gerade, dass du nicht den kompletten Code sehen kannst. Hab mal ein Bild vom Code gemacht:
http://www.fotos-hochladen.net/uploads/unbenanntj1riatbv8g.png
mir ist noch ne kleinigkeit aufgefallen:
in zeile 12:
$secs = 300;
ersetzen durch:
$secs = $timer_sec.
Ich sehe jetzt leider kein Fehler. nur der Hinweis, der countdown wird immer nur einmal beim aktuallisieren ausgeführt. Die sessionvaribale wird im endeffekt auch nur die sessionid via cookie am browser gespeichert und wird dann beim aufruf automatisch gesendet. Im übrigen hast du auf deiner Testseite den Ticker auf 300ms gesetzt statt auf 1000ms, daher zählt die Zeit zu schnell runter und beim reload wird ne höhere zeit angezeigt.
also bei mir funktioniert es.
um den Timer zurückzusetzen, müsstest dann in dem sessionarray irgendwann. Ansonsten zählt der countdown nur einmal und beim erneuten aufruf ist der countdown immer bei 0 ;-)
unset($_Session['countdown']);
in php schreiben.
Ah ok, das letzte war eine seehr wichtige Information :) Denn ich hatte mich gewundert, dass der Timer nach dem ersten Ablaufen, immer auf 00:00:00 stand.
Ich habe gesehen, dass wenn ich den Cookie "PHPSESSID" lösche, er wieder neugestartet wird.
Die Website ist so eigestellt, dass er nach Ablauf des Timers einen Button freigibt.
D.h. ich müsste es jetzt erreichen dass, wenn man auf den Button klickt, der Cookie "PHPSESSID" gelöscht wird, was ja mit dem Befehl setCookie('PHPSESSID', '', -1) möglich ist.
Nur weis ich jetzt nicht, wo ich das einbauen muss und wie^^ Hier ist mal der Button Code:
Wenn du mir noch sagen könntest, wo ich dann den php code setzten musst, dann müsste es klappen ;)
Vielen Dank schonmal, dass du mir so gut hilfst!
Ok, ich habe es jetzt!! Man kann sagen durch einen Zufall ;)
Also mal eine kleine Beschreibung meiner Seite:
Der Besucher meiner Seite muss auf einen Button klicken, um Bitcoins zu bekommen. Nach dem klicken des Buttons muss er noch ein Captcha lösen, um zu bestätigen, dass er ein Mensch ist und kein Roboter.
Ich habe es jetzt so eingestellt, dass man wenn man auf den Button klickt, der Cookie PHPSESSID gelöscht wird. Da dachte ich läge das Problem, denn theoretisch würde ja ab hier schon der Timer laufen BEVOR der Captcha überhaupt gelöst wurde.
Dem ist aber nicht so, da der Cookie erst nach einem neuladen der Seite gelöscht wird.
Und wie es der Zufall vielleicht so will, wird die Seite NACH lösen des Capchas automatisch neu geladen :) :)
Das heißt, der Timer beginnt genau dann wann er beginnen soll :)
Puh, Erleichterung nach stunden des rumprobierens ;)
Vielen Dank nochmal!
Achso sry, doch noch was kleines. Kann ich den Timer so einstellen, dass er nach Ablauf der Zeit, die Seite einmal neu läd?
Du müsstest die Sekunden irgendwo speichern. Anbieten würden sich hier Cookies, LocalStorage, SessionStorage, WebSQL und IndexedDB. Cookies können nicht so toll kontrolliert werden in Javascript, allerdings funktioniert das dann auch in uralten Browsern. SQL ist kompliziert, also fallen die letzten beiden weg.
LocalStorage vs SessionStorage:
LocalStorage überlebt einen Browser-Neustart, SessionStorage nicht.
window.localStorage['timer'] = Zahl window.sessionStorage['timer'] = Zahl
Dies machst du bei jedem Tick und beim Seiten laden liest du es einfach aus:
timeInSecs = originalzeit - window.localStorage['timer']
Die Seite neuladen kannst du mit "location.reload()"
Danke für deine Antwort. Ich habe es bereits geschafft einen Countdown mit cookies zu erstellen, hat jedoch den großen Nachteil, dass er beim schließen des Fensters nicht weiterläuft. Werde es wohl mal mit php probieren..
Einfach mal ein wenig um die Ecke denken. Du musst das ganze nicht Server-seitig aufziehen (außer du willst das 'ausversehene' oder 'absichtliche' löschen durch den User verhindern). Statt die Sekunden zu speichern, speicherst du ein Datum. Beim erneuten Aufruf vergleichst du dann gespeichertes Datum mit neuem Datum. Dann hast auch einen 'Ticker' gehabt.
Es muss localStorage.getItem("timer"); bzw. localStorage.getItem("timer", wert);
du brauchst die js-funktion window.setTimeout
Ok, also ich habe den Countdown ausprobiert und er funktioniert auch soweit, nur leider springt er beim aktualisieren und auch beim reload, wieder auf die Startzeit. Er speichert die bisher vergangene Zeit leider nicht :( Gibt es eine Möglichkeit, die Zeit zwischenzuspeichern, auf einem Server z.B. ?