Javascript Countdown

Umlüx

Huge Metal Fan

Registered: Jun 2001
Location: Kärnten
Posts: 8962

17.06.2010 - 10:05

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!

Bearbeitet von Umlüx am 05.07.2010, 12:26

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

17.06.2010 - 18:24

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
}

countdown und interval sollten aufeinander abgestimmt sein, sonst wird coutner negativ. Man kann das ganze auch anders aufziehen, und clearInterval() in Abhängigkeit des counter-wertes machen. Geschmackssache.

Umlüx

Huge Metal Fan

Registered: Jun 2001
Location: Kärnten
Posts: 8962

22.06.2010 - 08:57

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?

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

22.06.2010 - 09:39

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

Umlüx

Huge Metal Fan

Registered: Jun 2001
Location: Kärnten
Posts: 8962

22.06.2010 - 10:10

ich kopier den code gleich mal rein und mach dich verantwortlich wenn er nicht funktioniert

nein, vielen dank erstmal. ich werds gleich mal austesten!

Umlüx

Huge Metal Fan

Registered: Jun 2001
Location: Kärnten
Posts: 8962

29.06.2010 - 17:02

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>

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

29.06.2010 - 17:47

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 = ...;

Witzigerweise hast du es in deinem Beispiel eigentlich genau kervehrt gemacht: die Variablen, die außerhalb der function sowieso global sind haben ein var, die innerhalb nicht

Dann: "document.infobox.feld.value". Das ist DOM0 und ziemlich pfuschig; verwende zum lokalisieren eher document.getElementById('id-des-elements'), wenn du schon nicht jQuery/WhateverJsFramework mit seinen Selektoren verwenden willst.

Umlüx

Huge Metal Fan

Registered: Jun 2001
Location: Kärnten
Posts: 8962

29.06.2010 - 18:17

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

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

30.06.2010 - 00:33

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

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

Umlüx

Huge Metal Fan

Registered: Jun 2001
Location: Kärnten
Posts: 8962

30.06.2010 - 08:34

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

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

meepmeep

Here to stay

Registered: Feb 2006
Location: Wien
Posts: 2334

30.06.2010 - 09:16

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

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

30.06.2010 - 13:26

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

Umlüx

Huge Metal Fan

Registered: Jun 2001
Location: Kärnten
Posts: 8962

30.06.2010 - 14:08

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!

Umlüx Huge Metal Fan Registered: Jun 2001 Location: Kärnten Posts: 8962	17.06.2010 - 10:05 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! Bearbeitet von Umlüx am 05.07.2010, 12:26
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	17.06.2010 - 18:24 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 }` countdown und interval sollten aufeinander abgestimmt sein, sonst wird coutner negativ. Man kann das ganze auch anders aufziehen, und clearInterval() in Abhängigkeit des counter-wertes machen. Geschmackssache.
Umlüx Huge Metal Fan Registered: Jun 2001 Location: Kärnten Posts: 8962	22.06.2010 - 08:57 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?
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	22.06.2010 - 09:39 Genau; das ist aber nur so Pseudo-Code runtergeschrieben, nicht tatsächlich ausgeführt. Aber frag einfach wenn was nicht geht.
Umlüx Huge Metal Fan Registered: Jun 2001 Location: Kärnten Posts: 8962	22.06.2010 - 10:10 ich kopier den code gleich mal rein und mach dich verantwortlich wenn er nicht funktioniert nein, vielen dank erstmal. ich werds gleich mal austesten!
Umlüx Huge Metal Fan Registered: Jun 2001 Location: Kärnten Posts: 8962	29.06.2010 - 17:02 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>`
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	29.06.2010 - 17:47 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 = ...;` Witzigerweise hast du es in deinem Beispiel eigentlich genau kervehrt gemacht: die Variablen, die außerhalb der function sowieso global sind haben ein var, die innerhalb nicht Dann: "document.infobox.feld.value". Das ist DOM0 und ziemlich pfuschig; verwende zum lokalisieren eher document.getElementById('id-des-elements'), wenn du schon nicht jQuery/WhateverJsFramework mit seinen Selektoren verwenden willst.
Umlüx Huge Metal Fan Registered: Jun 2001 Location: Kärnten Posts: 8962	29.06.2010 - 18:17 ok danke, werd ich ändern. ich hab normal mit JS nie was am hut, daher mag das alles etwas unbeholfen wirken. aber es funzt
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	30.06.2010 - 00:33 Na das hättest jetzt nicht extra dazu sagen müssen. :-) Nein Scherz, freut mich, scheint dir soweit auch Spaß gemacht zu haben.
Umlüx Huge Metal Fan Registered: Jun 2001 Location: Kärnten Posts: 8962	30.06.2010 - 08:34 gibts jetzt noch eine möglichkeit das lästige dummy formularfeld zur ausgabe loszuwerden? Edit hats schon gefunden. ein div per .innerText ändern
meepmeep Here to stay Registered: Feb 2006 Location: Wien Posts: 2334	30.06.2010 - 09:16 afair funktioniert ".innerText" im Firefox nicht. ".innerHTML" wäre die alternative dafür
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	30.06.2010 - 13:26 jQuery ( grins ) deckt das X-Browser mit seiner .text()-Methode ...
Umlüx Huge Metal Fan Registered: Jun 2001 Location: Kärnten Posts: 8962	30.06.2010 - 14:08 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!

Javascript Countdown

Forum Index > Software > Coding Stuff

Umlüx

Rektal

Umlüx

Rektal

Umlüx

Umlüx

Rektal

Umlüx

Rektal

Umlüx

meepmeep

Rektal

Umlüx