JavaScript案例精解（五）

 

JavaScript案例精解（五）

2008年07月04日 星期五 08:48

日历 运行效果： 思路： 这个例子的思路总体有两个难点： 1、计算任意月份的第一天是星期几，即日历显示时，当前月份对应星期几 2、日历窗口的层(<div>、<span>)的构造，及其相应的事件(点击日期号填写当前的日期，点击年份选择年份，点击月份选择月份)。 在解决第一个问题时：我们选确定好1900-1-1是星期一，然后累计计算任意年份月份的第一天是第几天，然后模7，得出的结果就是当前月份第一天是星期几。这个问题充份考查我们的逻辑推导能力。 至于第二个问题，我感觉没有什么复杂的逻辑。取而代之的是javascript语法对样式表及层对象的灵活控制。 所以说javascript制作日历是个不错的例子，下面我们一一解析代码： HTML代码： 在HTML代码中，为了追求日历代码的独立性，我们在HTML代码中并未涉及日历所需要的层(<div>)，所有日历所需要的层都是由Javascript代码动态创建的。 所以这里的HTML代码只有一个文本框和一个按钮，在该按钮的onclientclick事件中我们调用日历代码中的calendar('TextBox1')函数。calendar函数的实参传入的是接收选中日期的文本框。 <form id="form1" runat="server">     <div>         出生日期：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>         <asp:Button ID="Button1" OnClientClick="return calendar('TextBox1')" runat="server" Text="Button" />     </div> </form> Javascript代码： 由于时间的关系，代码编写仓促，未经过充份测试。这里的代码量有点大，感兴趣的朋友可以进行研究与改进，当然也可以直接复制进行使用。 <script> //日历的边框线的颜色(车延禄) var bordcolor="blue"; //日历的背景色 var backcolor="#ccaaff"; //月份和年份标题栏的背景颜色 var titlecolor="#ffccaa"; //星期行的背景色 var weekcolor="yellow"; //当前日期的背景色 var todaycolor = "red"; //日历的字体的大小 var fontsize = "12px"; //日历中前景色 var fontcolor="black"; //日历的宽雅 var width=210; //为HTML文档的BODY标记动态添加onclick事件，当在页面任意处单击鼠标时，将会隐藏日历。 document.body.onclick = function() {     var calendar = document.getElementById("calendar");     if(calendar != null)     {         calendar.style.display="none";     } } function pit(e) //对象的绝对位置 { var t = {x:e.offsetLeft,y:e.offsetTop}; if(e=e.offsetParent) {     var r = pit(e);     t.x+=r.x;     t.y+=r.y; } return t; } //日历控件的主函数,它调用其它函数来实现日历的构建，形参target是目标控件的ID，日历控件会在ID是target控件下显示，并把选中的日期值填充到ID是target的控件中去。 function calendar(target) {     //查找ID是calendar的日历对象，如果未找到就创建该创建该日历，如果找到了就显示该日历对象     var datepane = document.getElementById("calendar");     if(datepane == null)     {         //datepane是日历控件的最外层的div，其它所有的div或span都在该div内部显示。         datepane = document.createElement("div");         //下面是设置该DIV的各个属性         datepane.id="calendar";         datepane.style.backgroundColor=backcolor;         datepane.style.width=width;         datepane.style.display = "block";         datepane.style.position = "absolute";   //此属性必须要设置，束则日历控件无法浮动定位显示         datepane.style.borderColor=bordcolor;         datepane.style.borderWidth=1;         datepane.style.borderStyle="solid";         //日历控件单击事件处理代码         datepane.onclick = function()         {             //取消事件冒泡             window.event.cancelBubble = true;             //在日历中单击，清除年份选择列表             var selyear = document.getElementById("ddSelYear");             if(selyear != null)             {                 selyear.outerHTML = "";             }             //在日历中单击，清除月份选择列表             var selmonth = document.getElementById("ddSelMonth");             if(selmonth != null)             {                 selmonth.outerHTML = "";             }         }         var txt = document.getElementById(target);         //设置日历控件的左边位置，这里注意目标控件用的是offsetLeft属性。         datepane.style.left = txt.offsetLeft+document.body.offsetLeft;         //设置日历控件的右边位置         var e = pit(event.srcElement.parentNode);         datepane.style.top = e.y+txt.offsetHeight;         //datepane.style.top = txt.offsetTop + txt.offsetHeight+document.body.offsetTop;         document.body.appendChild(datepane);     }     else     {         datepane.style.display = "block";     }     //清空日历控件的内容     datepane.innerHTML = "";     //调用createTitle函数添加年份、月份所在的标题栏     datepane.appendChild(createTitle(target));     //调用createWeek函数添加星期栏     datepane.appendChild(createWeek());     //调用createDate函数添加日期     datepane.appendChild(createDate(target));     //取消事件冒泡     window.event.cancelBubble=true;     //阻止按钮的提交     return false; } //当点击年份标签时，调用该函数显示年份列表 function selectYear(target) {     //创建ddSelYear层，该层中包含好多个div(即yearitem),每个div中包函一个年份。     var div = document.createElement("div");     div.id="ddSelYear";     div.style.width=50;     div.style.height=100;     div.style.zIndex=5; //此值宜大些，以便在日历控件最顶层显示该层，以便用户选择年份     div.style.display="block";     div.style.position="absolute"; //使期绝对定位浮动显示     div.style.backgroundColor="#ccffcc";    //设置期背景色     div.style.fontSize = 12;        div.style.overflow = "auto";    //当超出高度时自动产生滚动条         for(var i=1900;i<=2100;i++)     {         //ddSelYear年份列表层中的每一年份项。         var yearitem = document.createElement("div");         yearitem.style.cursor = "hand";         yearitem.innerHTML = i;         //当该年份被点击时触发的代码         yearitem.onclick = function()         {             //将日历控件中的当前年份设为选中的年份             document.getElementById("ddyear").innerHTML = this.innerHTML;             //调用createDate()方法刷新当前选中年月份中的日期结构             createDate(target);         }         div.appendChild(yearitem);     }     //返回该年份列表的层     return div; } //当点击月份时调用该函数，显示月份列表，此函数中属性的值的设置与selectYear函数中的内容类似，在此不一一注释 function selectMonth(target) {     var div = document.createElement("div");     div.id="ddSelMonth";     div.style.width=50;     div.style.height=100;     div.style.zIndex=5;    div.style.display="block";     div.style.position="absolute";     div.style.backgroundColor="#ccffcc";     div.style.fontSize = 12;     div.style.overflow = "auto";     for(var i=1;i<=12;i++)     {(车延禄)         var monthitem = document.createElement("div");         monthitem.style.cursor = "hand";         monthitem.innerHTML = i;         monthitem.onclick = function()         {             document.getElementById("ddmonth").innerHTML = this.innerHTML;             createDate(target);         }                 div.appendChild(monthitem);     }     return div; } //创建年月份标题函数 function createTitle(target) {     //标题栏容器div     var title = document.createElement("div");     title.style.backgroundColor = titlecolor;       title.style.width = width;     title.style.textAlign="center";         //取出当前日期，以便下面并把年份div内默认设为当前年份，月份div内默认设为当前月份     var now = new Date();         //创建年份div,设定默认值     var spanyear = document.createElement("span");     spanyear.id="ddyear";     spanyear.style.cursor = "hand";     spanyear.innerHTML = now.getFullYear();         //为该年份div设置单击事件处理程序     spanyear.onclick = function()     {         //调用上面的selectYear函数，显示年份选择列表，以供用户选择，改变年份         var selyear = selectYear(target);         document.getElementById("calendar").appendChild(selyear);         selyear.style.top = this.offsetTop; //年份列表的顶部位置与年份div的顶部对齐         selyear.style.left = this.offsetLeft;   //年份列表的左边与年份div的左边对齐         window.event.cancelBubble=true; //取消事件冒泡，这里一定要加上     }         //创建月份div，设定默认值     var spanmonth = document.createElement("span");     spanmonth.id="ddmonth";     spanmonth.style.cursor = "hand";     spanmonth.innerHTML = now.getMonth()+1;     //为该月份div设置单击事件处理程序     spanmonth.οnclick=function()     {         //调用上面的selectMonth函数，显示月份选择列表，以供用户选择，改变月份         var selmonth = selectMonth(target);         document.getElementById("calendar").appendChild(selmonth);         selmonth.style.top = this.offsetTop;         selmonth.style.left = this.offsetLeft;         window.event.cancelBubble=true;     }     //加上“年”“月”两个汉字     var txtyear = document.createElement("span");     txtyear.innerHTML = "年";     var txtmonth = document.createElement("span");     txtmonth.innerHTML = "月";         title.appendChild(spanyear);     title.appendChild(txtyear);     title.appendChild(spanmonth);     title.appendChild(txtmonth);         //返回标题栏对象     return title; } //创建星期栏的函数 function createWeek() {     //星期栏对象容器，其中容纳周一至周日七个span标签     var week = document.createElement("div");     week.style.width=width;     week.style.backgroundColor=weekcolor;     week.style.fontSize = 12;(车延禄)     week.style.textAlign="center";         //创建“星期一”的标签     var td1 = document.createElement("span");     //设置标签的显示方式，一定要设置为inline-block,否则span标记的style.width=30不会起作用的。     td1.style.display = "inline-block";     td1.style.width=30;     td1.innerHTML ="一";     //以下的标签与上面类似     var td2 = document.createElement("span");    td2.style.display = "inline-block";     td2.style.width=30;     td2.innerHTML ="二";     var td3 = document.createElement("span");     td3.style.display = "inline-block";     td3.style.width=30;     td3.innerHTML ="三";     var td4 = document.createElement("span");     td4.style.display = "inline-block";     td4.style.width=30;     td4.innerHTML ="四";     var td5 = document.createElement("span");     td5.style.display = "inline-block";     td5.style.width=30;     td5.innerHTML ="五";     var td6 = document.createElement("span");     td6.style.display = "inline-block";     td6.style.width=30;     td6.innerHTML ="六";     var td7 = document.createElement("span");     td7.style.display = "inline-block";     td7.style.width=30;     td7.innerHTML ="日";     //将周日作为一周中的第一天，这样编码更方便。     week.appendChild(td7);     week.appendChild(td1);     week.appendChild(td2);     week.appendChild(td3);     week.appendChild(td4);     week.appendChild(td5);     week.appendChild(td6);     //返回星期栏对象     return week; } //创建日期项的函数 function createDate(target) {     //如果已存在日期栏容器，则将其内容清空，以便下面重新填充     //如果不存在日期栏容器，则创建之     var datediv;     if(document.getElementById("showdate")!=null)     {         datediv = document.getElementById("showdate");         datediv.innerHTML = "";     }     else     {         datediv = document.createElement("div");     }     //取出当前要显示的年份     var year = document.getElementById("ddyear").innerHTML;     //取出当前要显示的月份     var month = document.getElementById("ddmonth").innerHTML;     //日期容器div的ID     datediv.id="showdate";     //调用getDateOfWeek函数，计算当前月份中的第一天是星期几，以便决定从哪个位置开始填写本月第一天。     var weekday = getDateOfWeek(year,month,1);     //计算当前月份的天数，以决定在日期栏容器中填写多少天，它是填写循环结束的条件     var daycount = 31;//当前月中的日期的天数     if(month==4||month==6||month==9||month==11)     {         daycount = 30;     }     else if(month == 2)     {         if(i%400==0||(i%4==0&&i%100!=0))         {             daycount = 29;         }         else         {             daycount = 28;         }     }     var daynum = 1;//要填写的日期，从当前月份的1号开始     var over=false; //是否达到本月最大天数，即当前月份中的日期是否创建完成     //循环日期行     for(var i=0;i<10;i++)   //循环日历中的日期行，这里的i<10无实际意义，可以设得更大一些     {         //创建该日历行的容器，第i周的容器         var row = document.createElement("div");         row.style.width = width;    //设置期宽雅与日历控件同宽         row.style.height = 25; //行高         row.style.verticalAlign="middle";           //在当前日历行中逐一创建每一天(span)，并设置日期和事件         for(var j=0;j<7;j++)         {             //如果这个月的第一天不是星期天，则在里面添加空的span标记，并进入下次循环，             if(i==0 && j<weekday)             {                                var cell = document.createElement("span");                 cell.style.display = "inline-block";                 cell.style.width = 30;                 cell.style.textAlign="center";                 row.appendChild(cell);                 continue;   //进行下次循环(车延禄)             }             //创建日期显示span，显示当前日期行中的每一天             var cell = document.createElement("span");             cell.style.display = "inline-block";//此属性必须设置             cell.style.width = 30;             cell.style.cursor = "hand";             cell.style.textAlign="center";             cell.style.fontSize="12";             //如果该span是今天，则将设置期红色背景             var d = new Date();             if(d.getFullYear() == parseInt(year)&&d.getMonth()+1==parseInt(month)&&d.getDate()==parseInt(daynum))             {                 cell.style.backgroundColor=todaycolor;             }             //设置日期span中的文本             cell.innerHTML = daynum++;             //设置自定义属性value(yyyy-MM-dd)，以便在单击该span时将其值写入文本框             cell.value = year+"-"+month+"-"+cell.innerHTML;             //当该日期被单击时要执行的处理代码             cell.onclick = function()             {                 // 把当前span标签中的 value值取出来送到target所指定的文本框中。                 var tar = document.getElementById(target);                 tar.value = this.value;                 document.getElementById("calendar").style.display="none";             }             //把当前日期span添加到当前的日期行中去。             row.appendChild(cell);             //如果达到月底的话就结束循环             if(daynum > daycount)             {                 over=true;                 break;             }         }         datediv.appendChild(row);         //如果达到月底的话就结束循环         if(over == true)         {             break;         }     }     return datediv; } //计算指定的年、月、日是星期几 function getDateOfWeek(year,month,day) {    var days = 0;//记录从1900-1-1至指定日期的累计总天数    //累加1900-1-1至year-1-1的天数     for(var i=1900;i<year;i++)     {         //闰年与平年         if(i%400==0||(i%4==0&&i%100!=0))         {             days += 366;         }         else         {             days += 365;         }     }    //累加从year-1-1至year-month-1这几个月中的天数     for(var j=1;j<month;j++)     {         switch(parseInt(j))         {             case 1:                 days += 31;break;             case 2:                 if(year%400==0||(year%4==0&&year%100!=0))                 {                     days += 29;                 }                 else                 {                     days += 28;                 }                 break;             case 3:                 days += 31;break;                         case 4:                 days += 30;break;             case 5:                 days += 31;break;             case 6:                 days += 30;break;             case 7:                 days += 31;break;             case 8:                 days += 31;break;             case 9:                 days += 30;break;             case 10:                 days += 31;break;             case 11:                 days += 30;break;             case 12:                 days += 31;break;         }     }     //再累加从year-month-1至year-month-day的天数     days += day;     //总天数模上7就是星期几(车延禄)     return days%7; } </script>