PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [HTML/CSS/JS] Countdownzähler für Homepage


Duc111
20.03.2007, 16:50
Hi ich suche einen Countdownzähler für meine Homepage, der beim betreten meiner HP anfangt runter zu zählen. Kennt jemand sowas?
Homeboy05
23.03.2007, 15:08
<html>
<head>
<title>Datum-Countdown mit JavaScript</title>

<script language="JavaScript">
// Ziel-Datum in MEZ
var jahr=2222, monat=2, tag=22, stunde=22, minute=22, sekunde=22;
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 jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0;

// Jahre
while(startDatum<zielDatum) {
jahre++;
startDatum.setFullYear(startDatum.getFullYear()+1) ;
}
startDatum.setFullYear(startDatum.getFullYear()-1);
jahre--;

// Monate
while(startDatum<zielDatum) {
monate++;
startDatum.setMonth(startDatum.getMonth()+1);
}
startDatum.setMonth(startDatum.getMonth()-1);
monate--;

// 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
(jahre!=1)?jahre=jahre+" Jahre, ":jahre=jahre+" Jahr, ";
(monate!=1)?monate=monate+" Monate, ":monate=monate+" Monat, ";
(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=
jahre+monate+tage+stunden+minuten+sekunden;

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

<body onload="countdown()">
<form name="countdownform">
<p>
<input size="75" name="countdowninput">
</p>
</form>
</body>

</html>
DJRazR
24.03.2007, 02:49
oder probiere mal das hier



<!-- In 3 Schritten zum digitalen Countdown:

1. Den 1. Teil in den HEAD-Bereich ihres HTML-Dokumentes einfügen
2. Den "onLoad event handler" im BODY-Tag einfügen
3. Der letzte Code-Schnipsel in dem BODY-Bereich an der Stelle einfügen, an der der
Countdown ausgegeben werden soll -->

<!-- Schritt 1: Diesen Code im HEAD-Bereich einfügen -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
//Created by DendE PhisH
function getTime() {
c1 = new Image(); c1.src = "1c.gif";
c2 = new Image(); c2.src = "2c.gif";
c3 = new Image(); c3.src = "3c.gif";
c4 = new Image(); c4.src = "4c.gif";
c5 = new Image(); c5.src = "5c.gif";
c6 = new Image(); c6.src = "6c.gif";
c7 = new Image(); c7.src = "7c.gif";
c8 = new Image(); c8.src = "8c.gif";
c9 = new Image(); c9.src = "9c.gif";
c0 = new Image(); c0.src = "0c.gif";
Cc = new Image(); Cc.src = "Cc.gif";
now = new Date();

//ENTER BELOW THE DATE YOU WISH TO COUNTDOWN TO
later = new Date("Jan 1 " + (parseInt(new Date().getFullYear())+1) + " 00:00:00");

days = (later - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (later - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (later - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (later - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);

if (secondsRound <= 9) {
document.images.g.src = c0.src;
document.images.h.src = eval("c"+secondsRound+".src");
}
else {
document.images.g.src = eval("c"+Math.floor(secondsRound/10)+".src");
document.images.h.src = eval("c"+(secondsRound%10)+".src");
}
if (minutesRound <= 9) {
document.images.d.src = c0.src;
document.images.e.src = eval("c"+minutesRound+".src");
}
else {
document.images.d.src = eval("c"+Math.floor(minutesRound/10)+".src");
document.images.e.src = eval("c"+(minutesRound%10)+".src");
}
if (hoursRound <= 9) {
document.images.y.src = c0.src;
document.images.z.src = eval("c"+hoursRound+".src");
}
else {
document.images.y.src = eval("c"+Math.floor(hoursRound/10)+".src");
document.images.z.src = eval("c"+(hoursRound%10)+".src");
}
if (daysRound <= 9) {
document.images.x.src = c0.src;
document.images.a.src = c0.src;
document.images.b.src = eval("c"+daysRound+".src");
}
if (daysRound <= 99) {
document.images.x.src = c0.src;
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
if (daysRound <= 999){
document.images.x.src = eval("c"+Math.floor(daysRound/100)+".src");
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
newtime = window.setTimeout("getTime();", 1000);
}
// End -->
</script>

</HEAD>

<!-- Schritt 2: Den "onLoad event handler" im BODY-Tag einfügen -->

<BODY onLoad="getTime()">

<!-- Schritt 3: Der folgende Code-Schnipsel in dem BODY-Bereich an der Stelle einfügen, an der der Countdown ausgegeben werden soll -->

<div align="center">
<h3>Countdown zum neuen Jahr 2005</h3>
</div>

<center>
<table><tr><td bgcolor="black" valign="bottom">
<img height=21 src="0c.gif" width=16 name=x>
<img height=21 src="0c.gif" width=16 name=a>
<img height=21 src="0c.gif" width=16 name=b>
<img height=21 src="Cc.gif" width=9 name=c>
<img height=21 src="0c.gif" width=16 name=y>
<img height=21 src="0c.gif" width=16 name=z>
<img height=21 src="Cc.gif" width=9 name=cz>
<img height=21 src="0c.gif" width=16 name=d>
<img height=21 src="0c.gif" width=16 name=e>
<img height=21 src="Cc.gif" width=9 name=f>
<img height=21 src="0c.gif" width=16 name=g>
<img height=21 src="0c.gif" width=16 name=h>
</td></tr></table>
</center>

<div align="center">
<h4>(Tage : Stunden : Minuten : Sekunden)</h4>
</div>


<p><center>
<font face="arial, helvetica" size"-2">Kostenloses JavaScript von<br>
<a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>