一个简单的日历显示

最新推荐文章于 2025-12-11 21:57:31 发布

最新推荐文章于 2025-12-11 21:57:31 发布 · 137 阅读

文章标签：

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

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

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

样式如下：