Javascript Countdown in HTML einbinden

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo alle zusammen,

ich möchte einen Javascript Countdown so in eine HTML Datei einbinden, das er direkt im HTML angezeigt wird.

Also erst der Countdown, dann unten drunter der Text der Startseite.

Wie kann ich das machen?

Der Quellcode des Counters sieht wie folgt aus:

;
…bis zum 11 November 2008 / 11:11 Uhr

// Erstellt mit dem Countdown-Generator - Homepage-Total.de
var end = new Date(‚November 11, 2008 11:11:00‘);
function toSt2(n) {
s = ‚‘;
if (n < 10) s += ‚0‘;
return (s + n).toString();
}
function toSt3(n) {
s = ‚‘;
if (n < 10) s += ‚00‘;
else if (n < 100) s += ‚0‘;
return (s + n).toString();
}
function countdown() {
d = new Date();
count = Math.floor(end.getTime() - d.getTime());
if(count > 0) {
miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
seconds = toSt2(count%60); count = Math.floor(count/60);
minutes = toSt2(count%60); count = Math.floor(count/60);
hours = toSt2(count%24); count = Math.floor(count/24);
days = count;
document.getElementById(‚c1‘).innerHTML = days + ’ TAGE’;
document.getElementById(‚c2‘).innerHTML = hours + ‚:‘ + minutes + ‚:‘ + seconds
setTimeout(‚countdown()‘, 100);
}
}
countdown();

Vielen Dank schon einmal.

LG Nadine

#2

Hallo Nadine,

ich möchte einen Javascript Countdown so in eine HTML Datei
einbinden, das er direkt im HTML angezeigt wird.
Also erst der Countdown, dann unten drunter der Text der
Startseite.

Was ist denn eine „Startseite“. Wo kann man
diese finden? Und wie genau soll das Resultat
aussehen?

Grüße

CMБ

#3

Also auf der Startseite soll oben in der Mitte der Counter laufen

Unten drunter ein fünfzeiliger Text

Also alles ganz simpel HTML

#4

Hallo

Also auf der Startseite soll oben in der Mitte
der Counter laufen
Unten drunter ein fünfzeiliger Text
Also alles ganz simpel HTML

Ach so.

So eine HTML-Seite besteht aus folgenden Elementen:

Idealerweise stehtt auch noch ein sog. „DOCTYPE“
am Dateianfang.

Üblicherweise schreibt man das Javascript
in den head>-Bereich. Die Reihenfolge
der Inhalte im body>-Bereich entscheidet
dann darüber, was „oben“ oder „unten“ angezeigt
wird.

Im folgenden Beispiel habe ich die Zeitanzeige
zuerst in einen Bereich (div&gt:wink: mit
dem Namen „datediff“ gebracht, der „eigentliche“
Seiteninhalt folgt dann im Bereich „wrap“.

So würde ich das machen:

Countdown Test
#datediff p { text-align:center; margin:0 }
#c1 { font:bold 30px arial; color:green; }
#c2 { font:bold 25px arial; color:blue; }
#wrap { height:400px; width:840px; margin:0 auto; margin-top:10px;
padding:1em; text-align:left; background-color:white;
border:1px solid #C7E7F8; }

// C.O.U.N.T.E.R #1 (positive time offset)
// © [email protected] 2008
function $(ID) {
return document.getElementById(ID)
}
function datediff(y, o, d, h, m, s) {
var n=new Date((new Date(y,o,d,h,m,s)).getTime()-(new Date()).getTime());
var match=/\s+0?(\d+):0?(\d+):0?(\d+)/.exec(n.toString());
this.y=n.getFullYear()-1970; this.o=n.getMonth();
this.d=n.getDate()-1; this.h=match[1]; this.m=match[2];
this.s=match[3];
}
function update(p1, p2, y, o, d, h, m, s) {
with(new datediff(y,o-1,d,h,m,s)) {
$(p1).innerHTML=(y?y+’ Jahr(e), ‚:‘’)+(o?o+’ Monat(e), ‚:‘’)+(d?d+’ Tag(e)’:’’)
$(p2).innerHTML=(h?h+’ Stunde(n), ‚:‘’)+m+’ Minute(n) und ‚+s+‘ Sekunde(n)’;
}
}
window.onload = setInterval(function(){update(‚c1‘,‚c2‘,2008,11,11,11,11,11)},1000);

calculating time difference
bis zum 11. November 2008 / 11:11:11 Uhr

5-zeiliger Text
Zeile 1
Zeile 2
Zeile 3
Zeile 4
Zeile 5

Grüße

CMБ