Tanja's Gifbildli

Birthday JavaScript HTML-- Geburtstagszähler-Tutorial --Birthday JavaScript HTML

Um dieses Tutorial nachzubasteln brauchst Du:

- Ein von Dir selbst erstelltes Bild oder ein Fertigbild Deiner Wahl -

- Eine Homepage, auf der Du den Geburtstagszähler im HTML einbauen kannst -

1--Erstelle zuallererst ein Bild in der Größe 275x125px.. Du kannst das Bild z.B. passend zu den Farben und dem Design Deiner Homepage gestalten.. Oder aber auch komplett anders, Deiner Fantasie sind hier keinerlei Grenzen gesetzt...

Mein Bild welches ich passend zu meiner Page gestaltet habe, schaut nun z.B. so aus:

Solltest Du selbst kein Bild erstellen können, so schnapp Dir einfach ein schönes Fertigbild Deiner Wahl, und verkleinere und/oder beschneide es auf die Größe 275x125px...

2--Speichere Dein 275x125px großes Bild nun als jpg Datei (oder wenn es animiert ist als gif Datei) in einen Ordner Deiner Wahl.. Lade Dein Bild nun auf Deinen Webserver hoch..!!

3--Nun kopierst Du Dir hier den HTML-Code für Deinen Geburtstagszähler:

<CENTER><TABLE id=table style="BORDER: collapse" bgcolor=#000000 cellSpacing=2 cellPadding=0 border=0> <tr> <td> <CENTER><TABLE id=table1 style="BORDER: collapse" bgcolor=#ffffff cellSpacing=0 cellPadding=0 border=0> <TR height=125> <TD align="center"> <IMG height=125 src="http://www.tanjas-gifbildli.ch/bild.jpg" width=275 border=0></TD></TR> <TR height=20> <TD align="center"> <font color="#000000" size="1" face="verdana"> <script type="text/javascript"> var today=new Date() var theoccasion=new Date(today.getFullYear(), 09, 08) var beforeOccasionText="bis zu meinem Geburtstag" var onOccasiontext="Heute habe ich Geburtstag" var monthtext=new Array("Jan","Feb","März","April","Mai","Juni","Juli","Aug","Sept","Okt","Nov","Dez") theoccasion.setMonth(theoccasion.getMonth()-1) var showdate="("+monthtext[theoccasion.getMonth()]+" "+theoccasion.getDate()+")" var one_day=1000*60*60*24 var calculatediff="" calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day)) if (calculatediff<0){ var nextyeartoday=new Date() nextyeartoday.setFullYear(today.getFullYear()+1) calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff) } var pluraldayornot=(calculatediff==1)? "Tag" : "Tage" if (calculatediff>0) document.write("<b>Noch "+calculatediff+" "+pluraldayornot+" "+beforeOccasionText+" !</b>") else if (calculatediff==0) document.write(".·:*¨¨*:·. <b>"+onOccasiontext+"</b> .·:*¨¨*:·.") </script> </font></b> </table></td></tr></table>

Baue diesen Code auf Deiner Homepage im HTML ein, dort wo Dein Geburtstagszähler erscheinen soll..!!

4--Nun passen wir den HTML-Code noch Deinem Geburtstagszähler an:

<CENTER><TABLE id=table style="BORDER: collapse" bgcolor=#000000 cellSpacing=2 cellPadding=0 border=0>
<CENTER><TABLE id=table1 style="BORDER: collapse" bgcolor=#ffffff cellSpacing=0 cellPadding=0 border=0>
<IMG height=125 src="http://www.tanjas-gifbildli.ch/bild.jpg" width=275 border=0></TD></TR>
<font color="#000000" size="1" face="verdana">
var theoccasion=new Date(today.getFullYear(), 09, 08)

Bei #000000 gibst Du eine Farbe für den Rahmen des Geburtstagszählers an.. Bei #ffffff gibst Du eine Farbe für den Hintergrund des Geburtstagszähler an.. Bei http://www.tanjas-gifbildli.ch/bild.jpg gibst Du den genauen Pfad zu Deinem Bild auf Deinem Webserver an, welches Du vorher hochgeladen hast..!! Bei #000000 gibst Du eine Schriftfarbe für den Geburtstagszähler an.. Bei 09, 08 gibst Du Dein Geburtsdatum an, zuerst den Monat, dann den Tag..!! Bei 09 kommt also der Monat hin in dem Du geboren bist, und bei 08 kommt der Tag hin, an dem Du geboren bist..!! 09, 08 steht nun z.B. bei mir für den 8.September..!!

5--Das war's auch schon, nun musst Du nur noch die Seite mit Deinem Geburtstagszähler auf Deinen Webserver hochladen, und fertisch.. Schon hast Du Deinen eigenen Geburtstagszähler, der nun immer fleißig die Tage bis zu Deinem Burzeltag zählt..