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.

8627 - 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

#6 von chrisboy
dmarzik hiermit möchte ich dich auf eine Funktion auf ntmb verweisen. Du kannst Tutorials von anderen Personen ändern. Dazu gehe einfach oben auf "Tutorial editieren".

grüße
Chrisboy
#5 von dmarzik
Hi,

ich habe es ausprobiert, und nach einigen Änderungen läuft es auch. Und: ich kann's gebrauchen. Daher Danke!

Änderungen:
1.: body onLoad="NameDerJavaScriptDatei();"
Du hattest nur geschrieben, als .js speichern, nicht aber, welcher Dateiname
2.: falsch: TargetDate = "TAG/MONAT/JAHR 00:00:00 GMT"; kein GMT, sondern AM oder PM, Tag und Monat vertauschen, keine Sekunden
richtig z. B.: TargetDate = "05/16/2010 10:00 AM";

Schön wäre es, wenn jeder Workshop mit sinnvollen Bildchen (Du hat damit angefangen) versehen und mit einem funktionierenden Beispiel (wie bei Selfhtml) ausgestattet wäre. Dann würden sich viele Fragen von selbst beantworten und solche Fehler würden auch nicht entstehen.
Hier mein Beispiel, wie es bei mir funktioniert. Datum ist der 16.5.10, 10:00. Dann ist bei unserer Schützengilde Joker-Pokal. Hier der Link: http://dmarzik.bplaced.net/pehape/test2.html

Grüße

Dirk
#4 von DJ Madhead
Deshalb heist es ja auch CountDOWN und nicht CountUP Smily NR:2
#3 von DJ Madhead
Dies ist ein Countdown der ab dann zählt, welches Datum und welche Zeit du eingibst bei "TAG/MONAT/JAHR 00:00:00"
#2 von gvh-fan
Ist das jetzt ein Countdown der nach meiner Wunschzeit zählt?
Also z.B noch 30 Tage bis zur Eröffnung zur Eisdiele.
Oder ein Countdown der ab dann zählt wenn ich die Seite lade?
#1 von DJ Madhead
Ich finde das sehr hilfreich für jeden der mal so etwas braucht. ;D

« 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