javascript封装的日历插件

function ShowCalendar(){ // -----------封装的日历JS插件 V1.0------------// /* 作者:星月 版权:星月工作室 CSDN:8988 博客:xysoftware.blog.sohu.com 一. 调用:<script>ShowCalendar()</ script> 二. 网页调用方法: 1. 加入CSS样式: 边框颜色 .bordercolor{background-color:#CCCCCC;} 日期单元颜色 .cellcolor{background-color:#FFFFFF;} 标题栏颜色 .titlecolor { background-color: #FFFFFF; font-size: 10pt; font-weight: bold } 当前日期颜色 .todaycolor { background-color: #F0F0F0; border-left: 2 solid #C0C0C0; border-right: 2 solid #808080; border-top: 2 solid #C0C0C0; border-bottom: 2 solid #808080 } 每行高度 .cellheight{height:30px;font-size:9pt} 2.用<script src=ShowCalendar.js></ script>载入本代码 (保证在调用之前载入,最好在body前) 三.特点: 1.可在同一网页下调用多个日历 2.使用非常方便,只需在要显示的位置插入本函数调用即可. */ // //============事件子函数============= //鼠标移上处理 function onMouseover(){ var el=event.srcElement; el.style.color='red'; }; //鼠标移开处理 function onMouseout(){ var el=event.srcElement; el.style.color=''; } //鼠标单击处理 function onClick(){ var el=event.srcElement; if(el.name=="OFF"){ setDisplayMode(); return; } if(el.name=="restore"){ today=new Date(); Show(); return; } if(el.tagName=="A"){ newDate(); return; } } //==============控制子函数================= function setDisplayMode(){ layerId.all.HID.style.display=layerId.all.HID.style.display=="none"?"":"none"; layerId.all.CTL[0].innerText=layerId.all.HID.style.display=="none"?"打开设置":"关闭设置"; } function newDate(){ var el=event.srcElement; var yy=today.getFullYear(); var mm=today.getMonth(); var dd=today.getDate(); if (el.name=="y1") yy--; else if (el.name=="y2") yy++; else if (el.name=="m1") mm--; else if (el.name=="m2") mm++; today=new Date(yy,mm,dd); Show(); } //===============计算子函数================== function to2byte(content){//返回显示两位数字的数 return content>9?content:"0"+content; } function getYYMMDD(dateobj){//返回YY年MM月DD日格式日期串 return dateobj.getFullYear()+"年"+to2byte(dateobj.getMonth()+1)+"月"+to2byte(dateobj.getDate())+"日"; } //=============== 添加默认样式 =================== // 当用户未设置自定义的样式时 function SetDefalutStyle(){ var sy=document.styleSheets(0).rules; var stylename=/\.(bordercolor|cellcolor|titlecolor|todaycolor|cellheight|cellheight)/ var s=document.styleSheets[0].rules[0].style.selectorText } //=============== 显示子函数 ================ function Show(){//按today指定日期刷新日历 var i,j,k; var yy=today.getFullYear(); //取年份 var mm=today.getMonth();//取月编号(0-11) var dd=today.getDate(); //取当前日期 var days=(new Date(yy,mm,31).getDate()==31?31:31-new Date(yy,mm,31).getDate());//计算本月天数 layerId.all.YYMMDD.innerText=today.toLocaleString().split(/\x20/)[0]; layerId.all.WW.innerText=week.substr(today.getDay(),1); layerId.all.YR.innerText=yy; layerId.all.MN.innerText=to2byte(mm+1); var k=1-new Date(yy,mm,1).getDay();//计算表中第1天偏移值 for (j=2;j<8;j++){ for(i=0;i<7;i++,k++) { if(j==7 && i>1) break; //如果是最后一行,则只保留前2格为日期单元 layerId.rows[j].cells[i].innerText=(k<1 || k>days)?" ":k; //更新日期单元 layerId.rows[j].cells[i].className=k==dd?"todaycolor":"cellcolor"; } } } function ShowTime(){//显示时间 var d=new Date(); var nowDate=getYYMMDD(d); if (oldDate!=nowDate) {today=d;Show();} layerId.all.HMS.innerText=d.toLocaleString().split(/\x20/)[1]; //相同时,更新时间显示 oldDate=nowDate; //记住本次时间 if (typeof(retInterval)!="number") retInterval=setInterval(ShowTime,1000); } //================= 初始化设置 ======================= var retInterval=null; var i,j; var week="日一二三四五六"; var rndid="LayerCalendar"+Math.ceil(Math.random()*9000+999);//为打开多个日历产生随机ID var s="<table id="+rndid+" class=bordercolor border=0 width=100% cellspacing=1 cellpadding=0><tr class=cellheight>"; s+="<td colspan=7 align=center class=titlecolor><a id=YYMMDD></a>&nbsp;&nbsp;星期<a id=WW></a></td></tr><tr class=cellheight>"; for(i=0;i<7;i++) s+="<td width="+(i>5?15:14)+"% class=titlecolor align=center>"+week.substr(i,1)+"</td>"; for(j=0;j<5;j++){ s+="</tr><tr class=cellheight>"; for(i=0;i<7;i++) s+="<td class=cellcolor align=center>"+(j*7+i)+"</td>"; } s+="</tr><tr class=cellheight><td class=cellcolor align=center>&nbsp;</td><td class=cellcolor align=center>&nbsp;</td>"; s+="<td colspan=3 class=cellcolor align=center><a id=HMS>&nbsp;</a></td><td colspan=2 class=cellcolor align=center><span name=OFF id=CTL>打开设置</span></td></tr>"; //以下是日期时间设置栏 s+="<tr id=HID class=cellheight style=display:none><td colspan=7 align=center class=cellcolor>"; s+="<a name=y1 id=CTL>3</a><span id=YR>YY</span>年<a name=y2 id=CTL>4</a>&nbsp;&nbsp;&nbsp;"; s+="<a name=m1 id=CTL>3</a><span id=MN>MM</span>月<a name=m2 id=CTL>4</a>&nbsp;&nbsp;&nbsp;"; //s+="<a name=d1 id=CTL>3</a><span id=DY>DD</span>日<a name=d2 id=CTL>4</a>&nbsp;&nbsp;&nbsp;" s+="<font name=restore id=CTL title='恢复当前系统日期'>复位</font>"; s+="<hr>设计制作：<a href='http://xysoftware.blog.sohu.com' target=_blank title='星月工作室 Copyright &copy; 2007 XYSOFTWARE.BLOG.SOHU.COM All rights reserved'>星月工作室</a></td></tr></table>" //表格结束 document.write (s); var layerId=eval(rndid); //取得外框TABLE对象 var today=new Date(); var el=layerId.all.CTL; for (i=0;i<el.length;i++){ el[i].style.cursor='hand'; //定义鼠标指针为手形 el[i].onmouseover=onMouseover; //定义鼠标移上效果处理 el[i].onmouseout=onMouseout; //定义鼠标移开效果处理 el[i].onclick=onClick; //定义鼠标单击处理 if (el[i].tagName=="A") { el[i].style.fontFamily="Webdings"; //为显示调整按钮设置字体 el[i].style.fontSize="16px"; } } layerId.onselectstart =function(){return false} //屏蔽选择 Show(); var oldDate=getYYMMDD(today); ShowTime(); }