yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Erst lesen, dann zustimmen!



Das regeln so kurz und knapp wie möglich gehaltenwerden sollten, ist bekannt. Aber meist werden sie erst gar nicht gelesen. Was liegt da näher als dem User die Zeit geben wenigstes ein wenig die Regeln zu überfliegen.

Formularbutton mit eingebauter "Intelligenz"

Ein Timer Zeigt an wie lange er warten muss. Wir setzen den Timer auf 5 Sekunden - mehr als 10 sind hier nicht vonnöten.

Der Quellcode:
Code:

<html><body>
<center><b><u> Button mit Timer </u></b></center>
<form action="" method="post" name="formular">
<input type="submit" name="ok" value="Ich stimme zu (5)">
</form>

<script type="text/javascript">
var sekunden = 5;
var wait = sekunden * 1000;
document.formular.ok.disabled=true;

for(i=1;i<=sekunden;i++) {
setTimeout("buttontext(" + i + ")", i * 1000);
}

function buttontext(num) {
if(num == (wait/1000)) {
document.formular.ok.value =
"Ich stimme zu ";
document.formular.ok.disabled=false;
}
else {
anzahl = (wait/1000)-num;
document.formular.ok.value =
"Ich stimme zu (" + anzahl + ")";
}
}
</script></body></html>


Der Button wird hier gesperrt damit man ihn nicht gleich drücken kann:

Code:

document.formular.ok.disabled=true;


Ein Zähler zählt nun die Zeit von 5 Sekunden herunter und schreibt ddie verbleibende Zeit direkt auf den Button. Nach Ablauf der Zeit wird der Button freigegeben und ist wieder anklickbar:

Code:

document.formular.ok.value = "Ich stimme zu ";
document.formular.ok.disabled=false;


Um die Wartezeit zu verlängern, muss zuerst in Zeile 7 der Wert �5� gegen die neue Anzahl an Sekunden getauscht werden. Diese gehört zusätzlich noch in die Klammern auf dem Starttext des Buttons in Zeile 3. Vergisst man dies, beginnt die Anzeige mit 5 Sekunden, und zählt dann erst mit dem neuen Wert bis auf Null herunter.

Geschrieben von DiWoWo am 18.06.2004 (6922x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren

ich gehe mit opera rein, und deaktiviere JavaScript ...



sollte man auch beachten!
Geschrieben von René