Tutorials

Einfacher Countdown [HTML/Javascript] Tutorial

Einloggen
Benutzername:
Passwort:

Passwort vergessen?
Kostenlos
Anmelden
werde Fan von ntmb.de...
anzeigen
Einfacher Countdown [HTML/Javascript]


19579 - ntmb - 12.03.2008 07:32 Uhr - Version: 1 - - verlinken als BB-Code


Hi,

ich hab mir vor einiger Zeit einen simplen Countdown gebaut und diesen wollte ich euch nicht vorendhalten.

Bei diesem Countdown gibt es nur eine Darstellung für Sekunden, aber das macht ja nichts Smily NR:7

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 <script language="JavaScript">
<!--    

    function countdown(zahl){
        if(zahl>1){ 
        // über 1 Sekunde hinaus -> x Sekunden
        document.getElementById('downloading').innerHTML=zahl+" Sekunden";
        count(zahl);            
        }
        else if(zahl==1){ 
        // 1 Sekunde
        document.getElementById('downloading').innerHTML=zahl+" Sekunde";
        count(zahl);            
        }
        else { 
        // Countdown abgelaufen, beliebige Handlung kann eingebaut werden
        document.getElementById('downloading').innerHTML="0 Sekunden";
        alert('Zeit ist abgelaufen!');
        }
    }
    
    function count(countzahl){
    // gewünschte Handlung kann hier eingebaut werden
    countzahl=countzahl-1;
        setTimeout("countdown("+countzahl+");",1000);            
    }
        
count(10);

// -->
</script>

<b>Countdown: <span id="downloading">10 Sekunden</span>!</b>



So das Script funktioniert folgendermaßen:
Man hat eine Funktion count(); diese wird durck count(10); gestartet, die 10 stehft für die Anzahl der Sekunden, die ablaufen sollen. In diesem Fall wär es 10 Sekunden. Vergisst aber nicht unten bei den Span Elemden den Wert 10 Sekunden nach euren obrigen Wert aus der Funktion count(); anzupassen! Smily NR:7

Die Funktion wird ausgeführt, in der Fuktion werden folgende Sachen ausgeführt:
Die Variable countzahl wird um einen Wert abgezogen (10-1=9).
Anschließend wird die Funktion countdown(9) ausgeführt, aber zeitverzögert mit einer Sekunde.
Die Funktion countdown(9) wird wie gesagt nach einer Sekunde Verzögerung ausgeführt. Die Zahl in der Klammer bewirkt die neu Setzung der vergleibenden Sekunden. Hier wird eine Ifabfrage mit mehren Bedinungen abgearbeitet.

if(zahl>1){....
-> ist erfüllt wenn die Zahl ( countdown(9) ) über 1 ist und es wird in dem Span Elemet 9 Sekunden geschrieben. Die Funktion count(); wird ausgeführt.

else if(zahl==1){....
-> wenn vorherige Bedingung nicht erfüllt ist und die Zahl den wert ein hat, dann wird in den Span Element 1 Sekunde geschrieben. Die Funktion count(); wird ausgeführt.

else{.....
-> ist erfüllt wenn oben die beiden anderen Abfragen nicht erfüllt sind (Sonst-Fall). Hierbei werden Dinge ausgeben wir eine alert('Zeit ist abgelaufen!' Smily NR:7 ; Nachricht (Info-Fenster), natürlich kann man da noch andere Funktion/Aufgaben einbauen, wie eine Weiterleitung oder sonstiges. Die Funktion count(); wird nicht ausgeführt, da die Zeit ja abgelaufen ist!

Viel Spaß mit dem Script Smily NR:7

mfg Eugen

Mitglieder-Kommentare

#4 von B4ckflip
Sehr schön Smily NR:8 nice.
Sollte mich langsam auch mal ran machen und mir scripten beibringen!!
#3 von Silvax
Sehr hilfreich wenn man mal einen braucht Smily NR:2
#2 von ntmb
Und wie findet ihr mein neues Tutorials, es ist ja schon lang her, dass ich eins geschrieben hab. Smily NR:7

mfg Eugen
Der freundliche Admin aus der Nachbarschaft
Lachecke.de - Dein täglicher Lacher im Internet
Listrank.de - Die ultimative Topliste nach Themen

Nur registrierte Mitglieder könnten einen Kommentar schreiben.

Melde dich doch ganz einfach an, es ist kostenlos. :-)
©2019 ntmb.org Projekt - Impressum - AGB - Banner - Hauptseite - Service Center