js 创建日历
来源：互联网 发布：淘宝联盟高佣怎么设置 编辑：程序博客网 时间：2024/05/21 16:59
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body style="text-align:center"> <table width="300px;" border="0" align="center" cellpadding="0" cellspacing="0" > <tr><td><select id="selectYear" onchange="changeDate();"></select>年<select id="selectMonth" onchange="changeDate();"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select>月</br> </td></tr> <tr><td><div id="rili" style="width:300px;height:400px;" align="center"></div> </td></tr> </table> </body> <script type="text/javascript"> function createCalendar(pYear,pMonth,startWeek){var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);var weekDays = new Array('日','一','二','三','四','五','六');if (((pYear % 4 == 0) && (pYear % 100 != 0)) || (pYear % 400 == 0)) monthDays[1] = 29;if (pMonth<1) pMonth=1;if (pMonth>12) pMonth=12;var dateData = 1;var returnString ="<table width='98%' border='0' align='center' cellpadding='3' cellspacing='1' bgcolor='#C9DFBD'>"+ "<tr align='center' bgcolor='#FFFFFF'>";for(var s in weekDays){returnString+= "<td><strong>"+weekDays[s]+"</strong></td>";}returnString+= "</tr>";returnString+= "<tr align='center' bgcolor='#FFFFFF'>";for(var i=1;i<startWeek;i++){returnString+="<td align='center' bgcolor='#FFFFFF'><strong> </strong></td>";}for(var i=startWeek;i<=7;i++,dateData++){returnString+="<td align='center' bgcolor='#FFFFFF'><strong><input type='button' name='dataButton' style='cursor:hand;width:100%;background-color:#ffffff' value='"+dateData+"'/></strong></td>";}returnString+="</tr>";returnString+= "<tr align='center' bgcolor='#FFFFFF'>";for(var i=1;dateData<=monthDays[pMonth-1];i++,dateData++){returnString+="<td align='center' bgcolor='#FFFFFF'><strong><input type='button' name='dataButton' style='cursor:hand;width:100%;background-color:#ffffff' value='"+dateData+"'/></strong></td>";if(i%7==0) {returnString+= "<tr align='center' bgcolor='#FFFFFF'>";}}var tempDays=7-(startWeek+monthDays[pMonth-1])%7; if(tempDays==7) tempDays=0;for(j=tempDays+1; (j>0 && j<7); j--){ returnString = returnString + "<td align='center' bgcolor='#FFFFFF'><strong> </strong>";}returnString+="</tr>";returnString+="</table>";document.getElementById('rili').innerHTML = returnString;}//初始化年份下拉框，并获得当前年月日历function init(){ var d = new Date();var year = d.getFullYear();var yearSel = document.getElementById('selectYear');for(var i=0;i<11;i++){ var y = year-5+i;yearSel.options.add(new Option(y,y)); }document.getElementById('selectYear').value = year;document.getElementById('selectMonth').value = d.getMonth()+1;}//日期改变时改变相应日历function changeDate(){var year = document.getElementById('selectYear').value;var month = document.getElementById('selectMonth').value; var date = new Date(year,month*1-1,1);createCalendar(year,month*1,date.getDay()+1);}init();changeDate();</script></html>
