Javascript Countdown

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/javascript_countdown_216991/page_1 - zur Vollversion wechseln!

klingt einfach, aber ich bin wohl auch dafür noch zu dämlich und über google finde ich nur komische datums countdowns..

was ich brauche wäre ein kleiner countdown (minuten und sekunden) auf einer seite.
ich hab dazu eine start zeit (timestamp, wird als Session variable übergeben) und eine dauer in minuten im php und das jscript soll mir (nach serverzeit!) die minuten und sekunden bis zum ende herunterzählen und danach eine andere seite aufrufen.

das ganze soll nämlich eine art formular sein, für welches man nur eine gewisse zeit zum ausfüllen hat.

tia!

Ich schlage vor an JS nur die Restdauer in ms anzugeben (relative Zeitangabe); dadurch wird es irrelevant welche Zeit am Client oder Server ist (absolute Zeitangaben, Probleme mit Synchronisierung).

Code:

var cancel = false;
var countdown= 60000; // 1 minute
var interval = 1000; // 1 sekunden

updateDisplayCounter();

setTimeout( function() { cancel = true; }, countdown);

var intervalID = setInterval( function() {
  if (cancel) {
    clearInterval( intervalID );
    // weiterleitung hier machen
    return;
  }
  counter -= interval;
  updateDisplayCounter();
}, interval);

function updateDisplayCounter() {
  // counter aktualisieren
}

nur damit ich das richtig versteh (bin absolutes JS ei)
countdown wäre hier also die restzeit in ms und interval halt der intervall in dem er runterzählt, ja?
und in updateDisplayCounter() aktualisiere ich den zahlenwert der anzeige?

Genau; das ist aber nur so Pseudo-Code runtergeschrieben, nicht tatsächlich ausgeführt. Aber frag einfach wenn was nicht geht.

ich kopier den code gleich mal rein und mach dich verantwortlich wenn er nicht funktioniert
nein, vielen dank erstmal. ich werds gleich mal austesten!

so, geschafft. durch dein beispiel hab ich mir die sache mit dem setInterval mal näher angesehen und folgendes zusammengestoppelt.
$duration ist dabei die dauer in minuten die per php aus der datenbank, bzw später aus der session variable kommt.

Code:

<script type="text/javascript">

var aktiv = window.setInterval("counter()", 1000);
var zeit = <?=$duration?> * 60;
function counter() {
  
  minute = Math.floor(zeit/60);
  sekunde = (zeit%60);
  
  nuller="";
  if(sekunde<10)
    nuller="0";
  
  document.infobox.feld.value = minute+":"+nuller+sekunde;
  
  if (zeit<1) {
    window.clearInterval(aktiv);
    alert("abgelaufen");
    window.document.location.href="results.php"
  }
  
  zeit = zeit - 1;
}
</script>

Ein paar Tipps:

Du solltest immer das Keyword var vor Variablen schreiben. Wenn du das nicht machst, so wie in der function werden diese Variablen automatisch global; was man in den seltensten Fällen will. Sprich:

Code:

var minute = ...; var sekunde = ...;

ok danke, werd ich ändern.
ich hab normal mit JS nie was am hut, daher mag das alles etwas unbeholfen wirken. aber es funzt

Na das hättest jetzt nicht extra dazu sagen müssen. :-)

Nein Scherz, freut mich, scheint dir soweit auch Spaß gemacht zu haben.

gibts jetzt noch eine möglichkeit das lästige dummy formularfeld zur ausgabe loszuwerden?

Edit hats schon gefunden.
ein div per .innerText ändern

afair funktioniert ".innerText" im Firefox nicht. ".innerHTML" wäre die alternative dafür

jQuery ( *grins* ) deckt das X-Browser mit seiner .text()-Methode ...

solche frameworks würd ich halt, so praktisch sie auch sind, gern vermeiden.
denn idealerweise seh ich wie es genau funktioniert und lern nebenbei was dazu

die funktion tut inzwischen übrigens auch in der praxis wie geheißen.
danke!

overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2025