Artikel Datenbank
Computer - Internet - Multimedia
FAQ
Suchen
Mitgliederliste
Benutzergruppen
Registrieren
Profil
Einloggen, um private Nachrichten zu lesen
Login
Artikel Datenbank Foren-Übersicht
->
Java Script und Flash für die Homepage
Antwort schreiben
Benutzername
Titel
Nachrichtentext
Smilies
Weitere Smilies ansehen
Schriftfarbe:
Standard
Dunkelrot
Rot
Orange
Braun
Gelb
Grün
Oliv
Cyan
Blau
Dunkelblau
Indigo
Violett
Weiß
Schwarz
Schriftgröße:
Schriftgröße
Winzig
Klein
Normal
Groß
Riesig
Tags schließen
[quote="GrayGhost"][size=18]Countdown zu einem Termin[/size] 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>[/code] Und so sieht es aus: http://artikel.eddys-domain.de/scripts/counter.htm MfG Erhard Olszok aka GrayGhost[/quote]
Optionen
HTML ist
an
BBCode
ist
an
Smilies sind
an
HTML in diesem Beitrag deaktivieren
BBCode in diesem Beitrag deaktivieren
Smilies in diesem Beitrag deaktivieren
Alle Zeiten sind GMT
Gehe zu:
Forum auswählen
Allgemeine Informationen zu dieser Webseite
----------------
Impressum
Allgemeine Informationen
Neue Themen und Änderungen
Computerthemen
----------------
Netzwerke
Windows Betriebssysteme
Daten schützen, verschlüsseln, verstecken und vernichten
Datensicherung und Systemsicherheit
Windows Spielereien
PC-Tools
PC Virtualisierung
Internet
----------------
Webpage Design
Email
Browser
Multimedia
----------------
Audio
Video
Bildbearbeitung
Media Recording
Video und Audio Streaming
Analoge und digitale Fotografie
Applikationen
----------------
MS Office
Corel Draw
Adobe Photoshop Elements
PDF Applicationen
Software & Scripts
----------------
Java Script und Flash für die Homepage
Software Empfehlungen
----------------
Freeware
Plugins
Vollversionen
Was wirklich nervt
----------------
Dumme Werbung
Böse Erfahrungen im Internet
----------------
Discounter
Thema-Überblick
Autor
Nachricht
GrayGhost
Verfasst am: 04.07.2007, 20:23
Titel: Countdown zu einem Termin
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
Powered by
phpBB
© 2001, 2005 phpBB Group
Deutsche Übersetzung von
phpBB.de