JavaScript Countdown Ausgabe formatieren

LepusWhite · 17. September 2011

Hallo!

Ich habe den JavaScript Code fuer einen Countdown Timer aus dem Web, und die Ausgabe soweit angepasst, ich scheitere momentan nur an der Formatierung (Schriftgroesse, -farbe, -art) der Ausgabe ( Tage, Stunden, Minuten und Sekunden).

So sieht der Code aus, evtl. kann mir jemand sagen, wie man das Ganze am einfachsten loesen kann.

Vielen Dank!
Matije

<html>
<head>
<title>Datum-Countdown mit JavaScript</title>

<script language="JavaScript">
// Ziel-Datum in MEZ
var jahr=2011, monat=9, tag=30, stunde=0, minute=0, sekunde=0;
var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);

function countdown() {
startDatum=new Date(); // Aktuelles Datum

// Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
if(startDatum<zielDatum) {

var tage=0, stunden=0, minuten=0, sekunden=0;

// Tage
while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
tage++;
startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
}

// Stunden
stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);

// Minuten
minuten=Math.floor((zielDatum-startDatum)/(60*1000));
startDatum.setTime(startDatum.getTime()+minuten*60*1000);

// Sekunden
sekunden=Math.floor((zielDatum-startDatum)/1000);

// Anzeige formatieren
(tage!=1)?tage=tage+" Tage, ":tage=tage+" Tag, ";
(stunden!=1)?stunden=stunden+" Stunden, ":stunden=stunden+" Stunde, ";
(minuten!=1)?minuten=minuten+" Minuten und ":minuten=minuten+" Minute und ";
if(sekunden<10) sekunden="0"+sekunden;
(sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde";

document.countdownform.countdowninput.value=
tage+stunden+minuten+sekunden;

setTimeout('countdown()',200);
}
// Anderenfalls alles auf Null setzen
else document.countdownform.countdowninput.value=
"0 Tage, 0 Stunden, 0 Minuten und 00 Sekunden";
}
</script>
</head>

<body onload="countdown()" bgcolor="000000">

<form name="countdownform">
<p>
<input size="45" name="countdowninput">
</p>
</form>
</center>
</body>

</html>

Eagle-PsyX- · 17. September 2011

Das kannst du mit CSS machen :-)

Code:

input[name$="countdowninput"] {
  font-family: 'Times New Roman', Arial;  /*Schriftart*/
  color: #F05; /*Schriftfarbe*/
  font-size: 12pt;  /*Schriftgröße*/
}

etc..
Also in deinem Fall:

HTML:

<html>
<head>
<title>Datum-Countdown mit JavaScript</title>
<style type="text/css">
input[name$="countdowninput"] {
  font-family: 'Times New Roman', Arial;  /*Schriftart*/
  color: #F05; /*Schriftfarbe*/
  font-size: 15pt;  /*Schriftgroeße*/
}
</style>
<script language="JavaScript">
// Ziel-Datum in MEZ
var jahr=2011, monat=9, tag=30, stunde=0, minute=0, sekunde=0;
var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);

function countdown() {
startDatum=new Date(); // Aktuelles Datum

// Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
if(startDatum<zielDatum) {

var tage=0, stunden=0, minuten=0, sekunden=0;


// Tage
while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
tage++;
startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
}

// Stunden
stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);

// Minuten
minuten=Math.floor((zielDatum-startDatum)/(60*1000));
startDatum.setTime(startDatum.getTime()+minuten*60*1000);

// Sekunden
sekunden=Math.floor((zielDatum-startDatum)/1000);

// Anzeige formatieren
(tage!=1)?tage=tage+" Tage, ":tage=tage+" Tag, ";
(stunden!=1)?stunden=stunden+" Stunden, ":stunden=stunden+" Stunde, ";
(minuten!=1)?minuten=minuten+" Minuten und ":minuten=minuten+" Minute und ";
if(sekunden<10) sekunden="0"+sekunden;
(sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde";

document.countdownform.countdowninput.value=
tage+stunden+minuten+sekunden;


setTimeout('countdown()',200);
}
// Anderenfalls alles auf Null setzen
else document.countdownform.countdowninput.value=
"0 Tage, 0 Stunden, 0 Minuten und 00 Sekunden";
}
</script>
</head>

<body onload="countdown()" bgcolor="000000">


<form name="countdownform">
<p>
<input size="45" name="countdowninput">
</p>
</form>
</center>
</body>
</html>

Würde es aber dir dennoch abraten, dass in einem Eingabefeld (<input>)-Tag darzustellen.

P.S: Bitte benutze für den Quelltext

Code:

[/B] oder [B][HTML][/B] anstatt [I][QUOTE][/I], da es kein Zitat ist.

LepusWhite · 17. September 2011

Erstmal danke fuer deine schnelle Antwort. Funktioniert es bei dir? - Bei mir bleibt alles beim Alten. ^^

lg

edit: sry mein Fehler.
Haut hin, vielen Dank! ^^

Suche

JavaScript Countdown Ausgabe formatieren

LepusWhite

Ensign

Eagle-PsyX-

Commander

LepusWhite

Ensign

Ähnliche Themen