Special Effect Calender Javascript

Javascripts > Javascript Clocks > Special Effect Calender

Script Title: Special Effect Calender

Description: This will 'highlight' each month and date in turn, stopping at the correct one and dimming the previous dates. It will then calculate the time to the seconds, making sure the hours, minutes, and secons stay perfectly intact and correct. IE4+ and NS6+ only.

Example: Available

Copy the following code into your <HEAD></HEAD> tags.

<script> //Text And Border Color Of Selected Date sdtcolor="red"; //Text And Border Color Of Previous Dates pdcolor="silver"; //Text And Border Color Of Future Dates fdcolor="black"; //Text Color Of Selected Month smtcolor="red"; //Text Color Of Previous/Future Months pfmtcolor="silver"; //Background Color Of Selected Date sdbgcolor="black"; //Background Color Of Previous Dates pdbgcolor="white"; //Background Color Of Future Dates fdbgcolor="white"; //Background Color Of Selected Month smbgcolor="black"; //Background Color Of Previous/Future Months pfmbgcolor="white"; //DO NOT EDIT BELOW THIS LINE! i=0; q=-1; pm=0; sec=-1; z=0; months=new Array("January","February","March","April","May","June","July","August","September","October","November","December"); daylengths=new Array("31","28","31","30","31","30","31","31","30","31","30","31"); x=-1; function DoIt() { document.getElementById("calender").innerHTML=""; date=new Date(); date=date.getMonth(); days=daylengths[date]*1; for (m=0; m<12; m++) { document.getElementById("calender").innerHTML+="<div id='month"+m+"' style='color:"+pfmtcolor+"; background-color:"+pfmbgcolor+"; text-align:center'>"+months[m]+"</div>&nbsp"; } document.getElementById("calender").innerHTML+="<br>"; for (p=1; p<=28; p++) { document.getElementById("calender").innerHTML+="<div id='date"+p+"' style='width:30; height:20; color:"+fdcolor+"; background-color:"+fdbgcolor+"; text-align:center; border:1px solid'>"+p+"</div>"; } document.getElementById("calender").innerHTML+="<p>"; document.getElementById("calender").innerHTML+="<div id='hr' style='width:30; height:20; color:"+fdcolor+"; background-color:"+fdbgcolor+"; text-align:center; border:1px solid'>0</div>"; document.getElementById("calender").innerHTML+="<h3>:</h3>"; document.getElementById("calender").innerHTML+="<div id='min' style='width:30; height:20; color:"+fdcolor+"; background-color:"+fdbgcolor+"; text-align:center; border:1px solid'>00</div>"; document.getElementById("calender").innerHTML+="<h3>:</h3>"; document.getElementById("calender").innerHTML+="<div id='secs' style='width:30; height:20; color:"+fdcolor+"; background-color:"+fdbgcolor+"; text-align:center; border:1px solid'>00</div>&nbsp"; document.getElementById("calender").innerHTML+="<div id='mornnoon' style='width:30; height:20; color:"+fdcolor+"; background-color:"+fdbgcolor+"; text-align:center; border:0px dashed'></div>&nbsp"; } function GetMonth() { x++; date=new Date(); date=date.getMonth(); if (x>date) { for (p=29; p<=days; p++) { document.getElementById("calender").innerHTML+="<div id='date"+p+"' style='width:30; height:20; color:"+fdcolor+"; background-color:"+fdbgcolor+"; text-align:center; border:1px solid'>"+p+"</div>"; } GetDate(); return; } document.getElementById("month"+x).style.color=smtcolor; document.getElementById("month"+x).style.backgroundColor=smbgcolor; if (x!=0) { document.getElementById("month"+(x-1)).style.color=pfmtcolor; document.getElementById("month"+(x-1)).style.backgroundColor=pfmbgcolor; } setTimeout("GetMonth()",500); } function GetDate() { i++; date=new Date(); date=date.getDate(); if (i>date) { GetHours(); return; } document.getElementById("date"+i).style.color=sdtcolor; document.getElementById("date"+i).style.backgroundColor=sdbgcolor; if (i!=1) { document.getElementById("date"+(i-1)).style.color=pdcolor; document.getElementById("date"+(i-1)).style.backgroundColor=pdbgcolor; } setTimeout("GetDate()",500); } function GetHours() { date=new Date(); hour=date.getHours(); ampm="AM"; if (hour>=12) { ampm="PM"; } if (hour>12) { hour-=12; } if (hour==0) { hour=12; } z++; if (z>hour) { GetMinutes(); return; } document.getElementById("hr").style.color=sdtcolor; document.getElementById("hr").style.backgroundColor=sdbgcolor; document.getElementById("hr").innerHTML=z; setTimeout("GetHours()",500); } function GetMinutes() { date=new Date(); minutes=date.getMinutes(); hour=date.getHours(); if (hour>12) { hour-=12; } if (hour==0) { hour=12; } document.getElementById("hr").innerHTML=hour; if (minutes<10) { minutes="0"+minutes; } q++; if (q>minutes*1) { GetSeconds(); return; } if (q>59) { q=0; } document.getElementById("min").style.color=sdtcolor; document.getElementById("min").style.backgroundColor=sdbgcolor; if (q<10) { q="0"+q; } document.getElementById("min").innerHTML=q; setTimeout("GetMinutes()",100); } function GetSeconds() { date=new Date(); minutes=date.getMinutes(); hours=date.getHours(); seconds=date.getSeconds(); sec++; if (hours>12) { hours-=12; } if (hours==0) { hours=12; } if (minutes<10) { minutes="0"+minutes; } if (sec>seconds) { GetAMPM(); return; } if (sec>59) { sec=0; } if (sec<10) { sec="0"+sec; } document.getElementById("secs").style.color=sdtcolor; document.getElementById("secs").style.backgroundColor=sdbgcolor; document.getElementById("hr").innerHTML=hours; document.getElementById("min").innerHTML=minutes; document.getElementById("secs").innerHTML=sec; setTimeout("GetSeconds()",100); } function GetAMPM() { pm++; if (pm>2) { return; } document.getElementById("mornnoon").style.border="1px solid"; document.getElementById("mornnoon").style.color=sdtcolor; document.getElementById("mornnoon").style.backgroundColor=sdbgcolor; document.getElementById("mornnoon").innerHTML=ampm.substring(0, pm); setTimeout("GetAMPM()",500); } </script>

Copy the following code INTO your <BODY> tag.

onSelectStart="return false;" onLoad="DoIt(); GetMonth()"

Copy the following code between the <BODY></BODY> tags of your html page.

<center><form name="j"><div id="calender" style="cursor:default"></div><style>DIV { display:inline; } H3 { display:inline; }</style> </center>

Graphxkingdom
Thousands of free Icons, Clipart & Themes!

Free-Backgrounds
Hundreds of eye-popping Backgrounds & Textures

Java-scripts.net
Cool and easy effects with cut-and-paste Javascripts!