有谁可以说说用javascript制作日历的原理?
如题!
原理？最好自己总结 下面就是个“日历” <html> <head> <title>Calendar</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta content="Microsoft FrontPage 4.0" name="GENERATOR" /> <meta content="FrontPage.Editor.Document" name="ProgId" /> <script language="javascript"> function TOfunc() { TO=window.setTimeout("TOfunc()",1000); var today=new Date(); document.clock.disp.value=today.toLocaleString(); } </script> </head> <body onload="TOfunc()"> <p align="center"> <big><big><big><big>Calendar</big></big></big></big> </p> <p align="right"> <img height="40" src="e:\photo\zu.jpg" width="72" /> </p> <form name="clock"> <div align="center"> <center> <p> <input type="text" size="24" name="disp" /> <br /> </p> </center> </div> </form> <script language="javascript"> function getTime(){ var now=new Date(); var hour=now.getHours(); var minute=now.getMinutes(); now=null; var ampm=""; if (hour>=12) {hour-=12;ampm=""} else { ampm=""} hour=(hour==0)?12:hour; if (minute<10) { minute="0"+minute} return (hour+":"+minute+" "+ampm) }
function leapYear(year){ if (year%4==0) { return true} else { return false} }
function getDays(month,year){ var ar=new Array(12); ar[0]=31; ar[1]=(leapYear(year))?29:28 ; ar[2]=31; ar[3]=30; ar[4]=31; ar[5]=30; ar[6]=31; ar[7]=31; ar[8]=30; ar[9]=31; ar[10]=30; ar[11]=31; return ar[month]; } function getMonthName(month){ var ar=new Array(12); ar[0]="January" ar[1]="February" ar[2]="March" ar[3]="April" ar[4]="May" ar[5]="June" ar[6]="July" ar[7]="August" ar[8]="September" ar[9]="October" ar[10]="November" ar[11]="December" return ar[month]; }
function setCal(){ var now=new Date(); var year=now.getYear(); var month=now.getMonth(); var monthName=getMonthName(month); var date=now.getDate(); now=null; var firstDayInstance=new Date(year,month,1); var firstDay=firstDayInstance.getDay(); firstDayInstance=null; var days=getDays(month,year); drawCal(firstDay+1,days,date,monthName,1900+year); }
function drawCal(firstDay,lastDate,date,monthName,year){ var headerHeight=0; var border=2; var cellspacing=4; var headerColor="midnightblue"; var headerSize="1"; var colWidth=50; var dayColor="darkblue"; var dayCellHeight=10; var cellHeight=20; var todayColor="red"; var timeColor="purple"; var now=new Date(); var year=now.getYear(); var text=""; text +='<center>'; text +='<table border=1'+'cellspacing=0'+'style="font-size:9pt">'; text +='<th colspan=7 height='+headerHeight+'>'; text +=''; text +=year+' '+monthName+' ' text +=''; text +='</th>'; var openCol='<td width='+colWidth+'height='+dayCellHeight+'>'; openCol +='<font color="'+dayColor+'">'; var closeCol='</font></td>'; var weekDay=new Array(7); weekDay[0]="Sunday" weekDay[1]="Monday" weekDay[2]="Tuesday" weekDay[3]="Wednesday" weekDay[4]="Thursday" weekDay[5]="Friday" weekDay[6]="Saturday" text +='<tr align="center" valign="center" style="font-size:9pt">'; for (var dayNum=0;dayNum<7;++dayNum){ text +=openCol+weekDay[dayNum]+closeCol;} text +='</tr>'; var digit=1; var curCell=1; for (var row=1;row<=Math.ceil((lastDate+firstDay-1)/7);++row) { text +='<tr align="right" valign="top" style="font-size:9pt">';
for (var col=1;col<=7;++col) { if (digit>lastDate) break; if (curCell<firstDay) { text +='<td></td>'; curCell++; } else { if (digit==date) { text +='<td height=1>'; text +='<font color="'+todayColor+'">'; text +=digit; text +='</font><br>'; text +='<font color="'+timeColor+' style="font-size=9pt">'; text +='<center>'+getTime()+'</center>';
text +='</font>'; text +='</td>'; } else { text +='<td height='+cellHeight+'>'+digit+'</td>'} digit++; } } text +='</tr>'; } text +='</table>'; text +='</center>'; document.write(text); } </script> <script language="javascript"> setCal(); </script> </body> </html>
