学步园

 //创建一个数组用于存放每个月的天数<br /> function montharr(m0,m1,m2,m3,m4,m5,m6,m7,m8,m9,m10,m11){<br /> this[0]=m0;<br /> this[1]=m1;<br /> this[2]=m2;<br /> this[3]=m3;<br /> this[4]=m4;<br /> this[5]=m5;<br /> this[6]=m6;<br /> this[7]=m7;<br /> this[8]=m8;<br /> this[9]=m9;<br /> this[10]=m10;<br /> this[11]=m11;<br /> }</p> <p> //实现月历<br /> function calender(){<br /> var today=new Date(); //今天的完整日期<br /> var thisDay;<br /> var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //一个包含所有月份天数的数组<br /> var year=today.getFullYear(); //年份<br /> thisDay=today.getDate(); //日</p> <p> //如果闰年则二月为29天<br /> if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0))<br /> {<br /> monthDays[1] = 29;<br /> }</p> <p> nDays=monthDays[today.getMonth()];//则nDays里存放的是当月总共有多少天<br /> firstDay=today;<br /> firstDay.setDate(1);//设定每月的第一天</p> <p> /*testMe=firstDay.getDate();//??<br /> if(testMe==2)<br /> {<br /> firstDay.setDate(0);<br /> }*/<br /> startDay=firstDay.getDay();//获得这个月的一号是星期几，从而找到序号开始的位置<br /> document.write("<div id='rili' style='position:absolute;width:140px;left:300px;top:100px;'>")<br /> document.write("<TABLE width='217' BORDER='0' CELLSPACING='0' CELLPADDING='2' BGCOLOR='#0080FF'>")<br /> document.write("<TR><TD><table border='0' cellspacing='1' cellpadding='2' bgcolor='Silver'>");<br /> document.write("<TR><th colspan='7' bgcolor='#C8E3FF'>");<br /> var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");<br /> var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");</p> <p> //var now=new Date();<br /> document.write("<FONT STYLE="font-size:9pt;Color:#330099" mce_STYLE="font-size:9pt;Color:#330099">" + "公元 " + year + "年" + monthNames[today.getMonth()] + " " + today.getDate() + "日 " + dayNames[today.getDay()] + "</FONT>");<br /> document.write("</TH></TR><TR><TH BGCOLOR='#0080FF'><FONT STYLE="font-size:9pt;Color:White" mce_STYLE="font-size:9pt;Color:White">日</FONT></TH>");<br /> document.write("<th bgcolor='#0080FF'><FONT STYLE="font-size:9pt;Color:White" mce_STYLE="font-size:9pt;Color:White">一</FONT></TH>");<br /> document.write("<TH BGCOLOR='#0080FF'><FONT STYLE="font-size:9pt;Color:White" mce_STYLE="font-size:9pt;Color:White">二</FONT></TH>");<br /> document.write("<TH BGCOLOR='#0080FF'><FONT STYLE="font-size:9pt;Color:White" mce_STYLE="font-size:9pt;Color:White">三</FONT></TH>");<br /> document.write("<TH BGCOLOR='#0080FF'><FONT STYLE="font-size:9pt;Color:White" mce_STYLE="font-size:9pt;Color:White">四</FONT></TH>");<br /> document.write("<TH BGCOLOR='#0080FF'><FONT STYLE="font-size:9pt;Color:White" mce_STYLE="font-size:9pt;Color:White">五</FONT></TH>");<br /> document.write("<TH BGCOLOR='#0080FF'><FONT STYLE="font-size:9pt;Color:White" mce_STYLE="font-size:9pt;Color:White">六</FONT></TH>");<br /> document.write("</TR><TR>");</p> <p> column=0;//表中的单元格的列数<br /> for(i=0;i<startDay;i++){//1号之前那几个空着的格子的处理<br /> document.write("/n<TD><FONT STYLE="font-size:9pt" mce_STYLE="font-size:9pt"> </FONT></TD>");<br /> column++;<br /> }</p> <p> for(i=1;i<=nDays;i++){//注意是<=<br /> if(i==thisDay){//如果是今天字体为白色<br /> document.write("</TD><TD ALIGN='CENTER' BGCOLOR='#FF8040'><FONT STYLE="font-size:9pt;Color:#ffffff" mce_STYLE="font-size:9pt;Color:#ffffff"><B>")<br /> }<br /> else{ //如果不是今天则背景为白色<br /> document.write("</TD><TD BGCOLOR='#FFFFFF' ALIGN='CENTER'><FONT STYLE="font-size:9pt;font-family:Arial;font-weight:bold;Color:#330066" mce_STYLE="font-size:9pt;font-family:Arial;font-weight:bold;Color:#330066">");<br /> }<br /> document.write(i);<br /> if(i==thisDay){<br /> document.write("</FONT></TD>");</p> <p> }<br /> column++;<br /> if(column==7){ //当到第七个单元格时换行<br /> document.write("<TR>");<br /> column=0;<br /> }<br /> }<br /> document.write("<TR><TD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'>")<br /> document.write("<FORM NAME='clock' onSubmit='0'><FONT STYLE="font-size:9pt;Color:#ffffff" mce_STYLE="font-size:9pt;Color:#ffffff">")<br /> document.write("现在时间:<INPUT TYPE='Text' NAME='face' ALIGN='TOP'></FONT></FORM></TD></TR></TABLE>")<br /> document.write("</TD></TR></TABLE></div>");<br /> }</p> <p> function showTime(){<br /> var now=new Date();<br /> var hours=now.getHours();<br /> var minutes=now.getMinutes();<br /> var seconds=now.getSeconds();<br /> var timeValue=""+((hours>12)?hours-12:hours);//下午的小时要减去12<br /> timeValue+=((minutes<10)?":0":":")+minutes; //当分钟数小于10时前面补零<br /> timeValue+=((seconds<10)?":0":":")+seconds;<br /> timeValue+=(hours>12)?"下午":"下午"; //加上，上午和下午的判断<br /> document.clock.face.value=timeValue; //把timeValue的值赋给input<br /> }

<body onload='setInterval("showTime()",1000)'>

<script language="JavaScript" type="text/javascript">
    calender();
</script>
</body>

样式如下：