Artikel Datenbank Foren-Übersicht Artikel Datenbank
Computer - Internet - Multimedia
 
 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

Countdown zu einem Termin

 
Neues Thema eröffnen   Neue Antwort erstellen    Artikel Datenbank Foren-Übersicht -> Java Script und Flash für die Homepage
Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  
Autor Nachricht
GrayGhost
Site Admin


Anmeldedatum: 06.06.2007
Beiträge: 148
Wohnort: Achim (bei Bremen)

BeitragVerfasst am: 04.07.2007, 19:23    Titel: Countdown zu einem Termin Antworten mit Zitat

Countdown zu einem Termin

Ich habe schon häufiger Zähler eingesetzt um die Tage bis zu einem bestimmten Ereignis anzuzeigen. Ich habe das Ganze nun noch um die Zeit erweitert. Das folgende Script zeigt Tage, Stunden, Minuten und Sekunden bis zu einem vorgegebenen Datum an.

Ich habe das Script zum besseren Verständnis kommentiert. Die Kommentare stehen in Java zwischen /* und */ bzw. hinter //. Kommentare zum HTML Code sind mit <!-- und --> eingeklammert. Die Kommentare kannst du bedenkenlos löschen bevor du es auf deiner HP einbaust.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Eddy's Geburtstag Counter</title>

<!--Diese Style Sheet Angabe verleiht der Tabelle ihren dezenten, feinen Umriss-->
<style type="text/css">                  
table {border: 2px solid; border-color:#333333;}
td {border: 1px solid; border-color:#5c5c5c;color:#5c5c5c}
tr {vertical-align:top}
</style>
</head>


<SCRIPT LANGUAGE="JavaScript">

/*Datum für Countdown im Format: (MONTH DAY, YEAR).
Es wird die Zeit zwischen dem 1.1.1970 und dem Zieldatum ermittelt*/

var zieldatum = new Date("July 17, 2005"); 

/*Diese Funktion sorgt dafür, dass einstellige Werte mit einer führenden Null
versehen werden. Hat also keine Funktionalität und dient nur der Kosmetik ;-)*/

function toSt(n) {                     
  s=""
  if(n<10) s+="0"
  return s+n.toString();
}

/*Dies ist die Hauptfunktion*/
 
function countdown() {
  cl=document.clock;
 
/*Der Variablen "heute" wird der Inhalt des Date Objects zugewiesen.
Das ist die Zeit in Millisekunden seit dem 1.1.1970*/
 
  heute=new Date();

/* Berechnet wird die Zeit zwischen "zieldatum" und der aktuellen Zeit in Sekunden.
Die Funktion Math.foor rundet ab. Es wird die nächst niedrigere Ganzzahl zurückgegeben.
Innerhalb der Klammer findet die Subtraktion der Werte Zieldatum und heute statt.
Da das Ergebnis in Millisekunden vorliegt, wird durch die Division gleich in Sekunden umgerechnet.*/
 
  count=Math.floor((zieldatum.getTime()-heute.getTime())/1000);

/*Dieser Abschnitt verhindert die Anzeige einer Null oder eines negativen Wertes.
Wenn kein Wert oder ein negativer vorliegt, dann wird -- bzw. ---- ausgegeben*/

  if(count<=0)                        
    {cl.tage.value ="----";
     cl.stunden.value="--";
     cl.minuten.value="--";
     cl.sekunden.value="--";
     return;
   }
   
/*In diesem Abschnitt weden nun aus den Sekunden (count) die Werte für die Sekunden,
Minuten, Stunden und Tage berechnet.*/

  cl.sekunden.value=toSt(count%60);  //Modulo60 -> Teilen durch 60 und Ausgabe des Restes
  count=Math.floor(count/60);       //Ermittlung der Minuten   
  cl.minuten.value=toSt(count%60);   //Modulo60 -> Teilen durch 60 und Ausgabe des Restes
  count=Math.floor(count/60);       //Berechnung der Stunden
  cl.stunden.value=toSt(count%24);   //Modulo24 -> Teilen durch 24 und Ausgabe des Restes
  count=Math.floor(count/24);       //Berechnung der Tage
  cl.tage.value=count;   
 
  setTimeout("countdown()",1000);    //Wartezeit von einer Sekunde
}
// -->
</script>

<!--Mit "onload" wird die Funktion countdown() beim Laden der Seite aufgerufen-->

<body onload="countdown();"> 
<font face="arial">
<form name="clock">

<!--Die Style Angabe "border-collapse:collapse" führt dazu, dass die TR Zellenrahmen mit dem Tabellenrahmen verschmelzen-->

<table  style="border-collapse:collapse; table-layout:auto" cellpadding="2" align="center" width="50%">
<tr><td><center>Tage:</center></td>
<td><center>Stunden:</center></td>
<td><center>Minuten:</center></td>
<td><center>Sekunden:</center></td></tr>

<tr><td><center><input name="tage" size="4"></center></td>
<td><center><input name="stunden" size="2"></center></td>

<td><center><input name="minuten" size="2"></center></td>
<td><center><input name="sekunden" size="2"></center></td></tr>
</table>

</form>
</font>
</body>
</html>


Und so sieht es aus:
http://artikel.eddys-domain.de/scripts/counter.htm

MfG
Erhard Olszok aka GrayGhost
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden E-Mail senden Website dieses Benutzers besuchen Yahoo Messenger
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    Artikel Datenbank Foren-Übersicht -> Java Script und Flash für die Homepage Alle Zeiten sind GMT
Seite 1 von 1

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de