Tutorials

Wie erstellt man einen Countdown mit Javascript? Tutorial

Einloggen
Benutzername:
Passwort:

Passwort vergessen?
Kostenlos
Anmelden
werde Fan von ntmb.de...
anzeigen
Wie erstellt man einen Countdown mit Javascript?
In diesem Tutorial erkläre ich euch wie ihr einen ganz einfachen Countdown für z.B. einen WartungsModus mit JavaScript erstellen könnt.

8626 - DJ Madhead - 07.05.2010 19:35 Uhr - Version: 4 - - verlinken als BB-Code


Zunächst erstellst du eine einfache TextDatei:

194



Dort kommt dann folgender Code rein:

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 function calcage(secs, num1, num2) {
  s = ((Math.floor(secs/num1))%num2).toString();
  if (LeadingZero && s.length < 2)
    s = "0" + s;
  return "<b>" + s + "</b>";
}

function CountBack(secs) {
  if (secs < 0) {
    document.getElementById("cntdwn").innerHTML = FinishMessage;
    return;
  }
  DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
  DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
  DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
  DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

  document.getElementById("cntdwn").innerHTML = DisplayStr;
  if (CountActive)
    setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}

function putspan(backcolor, forecolor) {
 document.write("<span id='cntdwn' style='background-color:" + backcolor + 
                "; color:" + forecolor + "'></span>");
}

if (typeof(BackColor)=="undefined")
  BackColor = "white";
if (typeof(ForeColor)=="undefined")
  ForeColor= "black";
if (typeof(TargetDate)=="undefined")
  TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
  DisplayFormat = "%%D%% Tage, %%H%% Stunden, %%M%% Minuten, %%S%% Sekunden.";
if (typeof(CountActive)=="undefined")
  CountActive = true;
if (typeof(FinishMessage)=="undefined")
  FinishMessage = "";
if (typeof(CountStepper)!="number")
  CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
  LeadingZero = true;


CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
  CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
  ddiff = new Date(dnow-dthen);
else
  ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);


Diese Datei speicherst du dann als .js Datei, z. B. countdown.js


Als nächstes öffnest du dein HTML-Dokument und schreibst folgendes in deinen Body-Tag:

1
2
3
 <body onLoad="CountdownAnzeigen();">

</body>



Als nächstes kommt an die Stelle, an der du den Countdown haben möchtest, dieser Code:

1
2
3
4
5
6
7
8
9
10
11
12
 <script language="JavaScript">
            TargetDate = "[MONAT/TAG/JAHR 00:00:00] GMT";
            BackColor = "transparent";
            ForeColor = "black";
            CountActive = true;
            CountStepper = -1;
            LeadingZero = true;
            DisplayFormat = "%%D%% Tage, %%H%% Stunden, %%M%% Minuten, %%S%% Sekunden";
            FinishMessage = "[HIER KOMMT DER TEXT REIN, DER DA STTEHEN SOLL WENN DER COUNTDOWN AUF 0 ABGELAUFEN IST]";
            </script>

            <script language="JavaScript" src="[NAME DER JAVASCRIPT DATEI].js"></script>


Alle Stellen in eckigen Klammern ersetzt Ihr durch eigene Angaben. Auch bei DisplayFormat könnt Ihr Änderungen einfügen.
Erklärung:

TargetDate: Die erste Zahl Steht für den Monat Die zweite für den Monat und die Letzt Zahl für das Jahr.
BackColor: in diesem Fall ist transparent eingestellt aber es können auch die normalen Farbwerte angegeben werden wie z.B für schwarz 000000 nur wichtig dabei ist es die Zahl ohne # einzufügen Farbcodes
Fore Color: Ist die Schriftfarbe
Deine HTML-Datei könnte dann z. B. so aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <html>
<head>
  <title>CountDownTest</title>
</head>
<body onLoad="Countdown();">
  <center><h1>CountDownTest</h1></center>
  <script language="JavaScript">
            TargetDate = "05/16/2010 08:00:00 AM";
            BackColor = "transparent";
            ForeColor = "black";
            CountActive = true;
            CountStepper = -1;
            LeadingZero = true;
            DisplayFormat = "Noch %%D%% Tage, %%H%% Stunden, %%M%% Minuten, %%S%% Sekunden bis zum Joker-Pokal";
            FinishMessage = "Der Joker-Pokal Joker-Pokal am 16.05.10 hat begonnen!";
            </script>

            <script language="JavaScript" src="countdown.js"></script>
</body>
</html>

Ihr könnt den Inhalt beliebig verändern. Nur folgendes ist wichtig wenn ihr die Uhrzeit benutzt:

AM = Vormitags
PM = Nachmittags

Dann nur noch auf speichern und fertig ist der Countdown! Smily NR:8

Ein funktionierendes Beispiel findet Ihr auf http://sgi-schweinitz.de/, einen weiteren Test auf http://dmarzik.bplaced.net/pehape/test2.html

Viel Spaß damit!

Vielen Dank an DJMadHead für die Grundversion.

Mitglieder-Kommentare

#16 von Niclas
Super Danke
#15 von DennisLEV
Was so ein Runterzählen kompliziert werden kann, aber geil und schaut super aus!
#14 von djleinad
warum steht da dann nur countdown test da mehr net
#13 von gvh-fan
@dmarzik wenn du willst kannst du es ja nochmal auf GMT ändern. Ich hatte es selber als erstes mit GMT auch so ausprobiert und Kamm zu den Schluss das es nicht funktionierte.

#12 von dmarzik
Danke für das Bild, gvh-fan.

"Ich habe das Tutorial noch einmal geändert. Weil du vergessen hast AM oder PM zu schreiben!" Das ursprüngliche GMT von dj-madhead ist, nach späterer gründlicher Überlegung, für internationale Seiten besser. Allerdings muss man 2 Stunden von unserer Zeit abziehen (eine für Zeitzone, eine für Sommerzeit). Leider kann man hier bei den Tutorials noch nicht seine eigenen Kommentare ändern (Hinweis an ntmb).

Grüße
Dirk
#11 von gvh-fan
Jetzt ist das Bild da.
Ich glaube das wurde gelöscht wenn ich davor noch auf Vorschau des Tutorial gehe?

Ist ja auch egal. Hauptsache ist es da.

lg gvh-fan
#10 von zerfleischer
Ich seh das Bild. Hast du es nochmal hochgeladen gehabt oder kam es jetzt im nachhinein?

Die Gymnasiasten sind so blöd.... die rechnen mit Buchstaben
#9 von dassindwir
es muß nicht freigeschaltet werden ich sehe zummindestens nichts
vielleicht ist das Bild nicht gespeichert worden

versuche es noch mal hoch zu laden und achte auf die Größe die das Bild habe darf
Liebe Grüße
dassindwir


#8 von gvh-fan
Ich habe das Tutorial noch einmal geändert. Weil du vergessen hast AM oder PM zu schreiben!

Weil ich schonmal dabei war habe ich noch eine Erklärung eingefügt was die einzigen Werte bedeuten. Und auch noch ein Bild. Was aber noch nicht angezeigt wird. Muss das Bild noch freigeschaltet werden?
#7 von dmarzik
Danke für den Hinweis, Chrisboy. Nachher habe ich etwas mehr Zeit, dann werde ich durch Änderung eine zweite Version erstellen.
Grüße
Dirk

« 1 2 »

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