用javascript 实现的万年历代码。
来源：互联网 发布：js类数组和数组的区别 编辑：程序博客网 时间：2024/05/22 15:39
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>日历test</title><style type="text/css">*{ margin:0px; padding:0px;}#dateBody{width:300px; padding:10px; background:#CCC;}.weekday{ width:40px; height:40px; background:#999; line-height:30px; margin:1px; text-align:center; margin-top:2px; vertical-align:middle;float:left;}.day{ width:40px; height:40px; background:#999; line-height:40px; margin:1px; text-align:center;float:left;}.days{ width:40px; height:40px; background:#999; line-height:40px; margin:1px; text-align:center;float:left;}#thisDay{width:40px; height:40px; background:#093;line-height:40px; margin:1px; text-align:center;float:left;}#setDate{ width:320px; height:40px; background:#999; vertical-align:middle; line-height:40px; font-size:16px; font-weight:600; text-align:center;}#borthTextAre{ width:320px; height:20px; background:#96F;}</style></head><body><div id="borthTextAre" >你的生日：<input id="borthText" type="text" /></div><div id="setDate"> 选择年份：<select id="setYear" onchange="chose(this)"></select> 选择月份：<select id="setMonth" onchange="chose(this)"></select></div><!-- 日历 begin--><div id ="dateBody"><div class="weekday">日</div> <div class="weekday">一</div> <div class="weekday">二</div> <div class="weekday">三</div> <div class="weekday">四</div> <div class="weekday">五</div> <div class="weekday">六</div> <!-- 日历天数显示 begin--> <div id="days"> </div> <!-- 日历天数显示 begin--> <br style="clear:both;" /> </div><!--日历 end --><script type="text/javascript">function $(id){return document.getElementById(id);}var nowDay = new Date();var year=parseInt(nowDay.getFullYear());var month=parseInt(nowDay.getMonth());builtSetYearAndMonth(100);//显示该年该月的日历function makeDays(year,month){var firstDay = new Date(year,month,1);//获得每月的前面空余的天数var firstDayBefore = parseInt(firstDay.getDay());//显示每月前面空余的天数for(var i= 0;i<firstDayBefore;i++){dayobj = document.createElement("div");dayobj.className="day";$("days").appendChild(dayobj);}//显示每月的天数for(var i=1;i<=getDayCountByYearAndMonth(year,month);i++){dayobj = document.createElement("div");dayobj.className="day";dayobj.name=year+"-"+(parseInt(month)+1)+"-"+i;$("days").appendChild(dayobj);dayobj.innerHTML = i;//设置当天的样式if(nowDay.getFullYear()==year && nowDay.getMonth()==month && nowDay.getDate()==i){dayobj.id="thisDay";}dayobj.onmouseover= function(){this.style.backgroundColor="#690";}dayobj.onmouseout= function(){this.style.backgroundColor="#999";}dayobj.onclick= function(){//$("borthTextAre").value=this.name;//$("borthTextAre").innerHTML = $("borthTextAre").value;//$("borthTextAre").innerHTML="你的生日："+this.name;$("borthText").value = this.name;}}}//计算该年该月的天数function getDayCountByYearAndMonth(year,month){month++;if(month==4 || month==6 || month==7 || month==9 || month==11)return 30;if(month==2){if(((year%4==0)&&(year%100!=0)) || (year%400 == 0))return 28;return 29;}return 31;}//初始化年月选择器function builtSetYearAndMonth(yearNum){for(var i=-yearNum; i<yearNum;i++){yearObj = document.createElement("option");yearObj.innerHTML =parseInt(nowDay.getFullYear())+i;yearObj.value =parseInt(nowDay.getFullYear())+i;$("setYear").appendChild(yearObj);}for(var i=0;i<12;i++){monthObj = document.createElement("option");monthObj.innerHTML=i+1;monthObj.value =i;$("setMonth").appendChild(monthObj);}$("setYear").selectedIndex = yearNum;$("setMonth").selectedIndex = parseInt(nowDay.getMonth());makeDays(parseInt(year),parseInt(month));}function chose(ele){if(ele.id == "setYear"){year = ele.value;}if(ele.id == "setMonth"){month = ele.value;}$("days").innerHTML="";makeDays(year,month);}</script></body></html>
