Wie erstellt man einen Countdown mit Javascript? Tutorial - Kostenlose Homepage Tools für deine Homepage auf ntmb.de

Du bist hier: Startseite » Tutorials » Wie erstellt man einen Countdown mit Javascript? Tutorial

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.

1758 -

DJ Madhead

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

Zunächst erstellst du eine einfache TextDatei:

Dort kommt dann folgender Code rein:

CODE:


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:

CODE:


<body onLoad="CountdownAnzeigen();">



</body>

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

CODE:


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

CODE:


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

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.

Zurück

Mitglieder-Kommentare

#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

#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

Hobby-Stadion.net.tc - Das Online Fotoportal

« 1 2 »

Nur registrierte Mitglieder könnten einen Kommentar schreiben.

Melde dich doch ganz einfach an, es ist kostenlos. :-)