简陋的JS日历

/* author:zheyiw * date:23/7/2009 * version:1.1 * 使用举例：  onclick="ShowCalendar('InputBoxID','outputBoxID')" *             InputBoxID是按钮控件  outputBoxID是日期输出的文本框 */ /* 历史版本信息： * v1  原始版本 * v1.1 添加拖动功能， 高亮显示当天，添加：加减年份 */ //定义一块区域 document.writeln("<div id='Calendar' style='position:absolute; z-index:1; visibility: hidden; filter:\"progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3)\"'></div>"); //document.writeln("<div id='Calendar' style='position:absolute; z-index:1; visibility: hidden; '></div>"); //document.writeln('<iframe id="Calendar" name=wpCalendarLayer frameborder=0 onmouseout="wpCalendar.correctPosition()" style="position: absolute; width: 153; height: 208; z-index: 9998; display: none"></iframe>'); //输出数据变量 var outputData; //确定日历位置，显示当前日期 function ShowCalendar(InputBox,outputBox) { outputData=document.getElementById(outputBox); var x,y; //  var o=eval("document.all."+InputBox);  // var o=eval("document.getElementById(InputBox)"); //控制控件出现的位置 var o=document.getElementById(InputBox); //传入字符串时       x=o.offsetLeft;     y=o.offsetTop;     while(o=o.offsetParent)     {         x+=o.offsetLeft;         y+=o.offsetTop;     }     document.getElementById("Calendar").style.left=x+2+"px";     document.getElementById("Calendar").style.top=y+20+"px";     document.getElementById("Calendar").style.visibility="visible";  //显示div          var objdate=new Date(); MainCalendar(objdate.getYear(),objdate.getMonth(),objdate.getDate()); } //绘制日历 function MainCalendar(year,month,day) {     var intLoop,intWeeks,intDays;     var DivContent="";         //插入一个表格 var objdate=new Date(); var firstDay=new Date(year, month, 1).getDay();  //得到第一天是星期几 var maxday=new Date(year, month+1, 0).getDate();  //得到当前月的天数          DivContent+="<table border='0' cellspacing='0' style='border:1px solid #0066FF; background-color:#EDF2FC'>";     var strMonthMin="monthMin("+ year +","+ month +","+ day +")";     var strMonthAdd="monthAdd("+ year +","+ month +","+ day +")";     var strYearMin="yearMin("+ year +","+ month +","+ day +")";     var strYearAdd="yearAdd("+ year +","+ month +","+ day +")";     DivContent+="<tr><td align=center ><input type='button' onclick="+ strMonthAdd +" value='<'/> </td>"     DivContent+="<td align=center ><input type='button' onclick="+ strYearMin  +" value='<<'/> </td>"          //年份减     DivContent+="<td align=center colspan=3>"+ year +":"+ (month+1) +"</td>"                                     DivContent+="<td align=center ><input type='button' onclick="+ strYearAdd  +" value='>>'/> </td> "        //年份加     DivContent+="<td align=center ><input type='button' onclick="+ strMonthMin  +" value='>'/> </td></tr>";     DivContent+="<tr id='moveTR' style='cursor: move ' onmousedown='DragStart()' onmouseup='DragEnd()'><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td><tr>";      var d=1,dd=1; for(var i=0;i<6;i++) {   DivContent+="<tr>";   var strOutData="outData(this,"+ year +","+ month +")";   for(var j=1;j<8;j++)   {    if(d<=firstDay || dd>maxday)  { DivContent+="<td> </td>";}    else if(dd==Number(objdate.getDate()) && month==Number(objdate.getMonth()) && year==Number(objdate.getYear())) {     DivContent+="<td bgcolor='silver' onmouseover='MouseOver(this)' onmouseout='MouseOut(this)' onclick="+strOutData+">"+dd+"</td>";     dd++;    }    else {     DivContent+="<td onmouseover='MouseOver(this)' onmouseout='MouseOut(this)' onclick="+strOutData+">"+dd+"</td>";     dd++;    }    d++;   }   DivContent+="</tr>";   }     DivContent+="</table>";          //在区域中插入html     document.getElementById("Calendar").innerHTML=DivContent;     // newCalendar(); } /*开始日历拖动*/ function DragStart() { var o =document.getElementById("Calendar"); o.onselectstart = function() {     return(false); }; o.onmousedown = function(e) { //   e = e||window.event;  //  var x=e.layerX||e.offsetX; //   var y=e.layerY||e.offsetY;  // e = window.event; // var x=e.offsetX; //var y=e.offsetY; var xx = mouseAbsolutePostion(e).x; //鼠标绝对位置 var yy = mouseAbsolutePostion(e).y; // var ox = o.offsetLeft ;//  div绝对位置 var oy = o.offsetTop;// var x=xx-ox; var y=yy-oy;     o.onmousemove = function(e)     {//鼠标移动时计算控件位置       e=window.event;       o.style.left=(e.clientX-x)+"px";       o.style.top=(e.clientY-y)+"px";           };          o.onmouseup=function()     {       o.onmousemove=null;     }; }; } //关于这个拖动函数的理解：function DragStart()就是一个对象，当鼠标按下后就创建了这个对象，并且从来没有销毁。 //o.onmousedown o.onmousemove  o.onmouseup三个函数被激活。 //所以在日历没有被拖动前，在其他地方是不能拖动的。 //但日历被拖动过一次后，在其他地方o.onmousedown会开始响应，重新计算坐标，作出移动动作。 function mouseAbsolutePostion(evt) { evt = event ? event : window.event; return {x:evt.clientX,y:evt.clientY}; } /*结束日历拖动*/   function DragEnd() { }    //月份增加 function monthAdd(year,month,day) { var DivContent=""; if (month==11) {month=0;year++;} else {month++;} document.getElementById("Calendar").innerHTML=DivContent; MainCalendar(year,month,day); } //月份减少 function monthMin(year,month,day) { var DivContent=""; if (month==0) {month=11;year--;} else {month--;} document.getElementById("Calendar").innerHTML=DivContent; MainCalendar(year,month,day); } //年份增加 function yearAdd(year,month,day) { var DivContent=""; document.getElementById("Calendar").innerHTML=DivContent; MainCalendar(year+1,month,day); } //年份减少 function yearMin(year,month,day) { var DivContent=""; document.getElementById("Calendar").innerHTML=DivContent; MainCalendar(year-1,month,day); } //鼠标经过 function MouseOver(obj) {   obj.style.background="blue";   } //鼠标离开 function MouseOut(obj) {   obj.style.background="#EDF2FC"; } //输出数据 function outData(obj,year,month) { var a=year+"-"+(month+1)+"-"+obj.innerText; outputData.value=a; document.getElementById("Calendar").innerHTML=""; }