动态日历

来源：互联网发布：ewb仿真软件简介编辑：程序博客网时间：2024/05/23 21:49
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>动态日历</title><script src="js/jquery-1.11.1.min.js"></script><script>$(function(){var date = new Date();var year = date.getFullYear();var month = date.getMonth()+1;init(year,month);//初始化   年和月的下拉列表function init(y,m){var year = [1970,2020];for(var i=year[0];i<=year[1];i++){if(y==i){var option = $("<option value='"+i+"' selected='selected'>"+i+"</option>");$("#year").append(option);}else{var option = $("<option value='"+i+"'>"+i+"</option>");$("#year").append(option);}}for(var i=1;i<=12;i++){if(m==i){var option = $("<option value='"+i+"' slected='slected'>"+i+"</option>");$("#month").append(option);}else{var option = $("<option value='"+i+"'>"+i+"</option>");$("#month").append(option);}}getDate(y,m);}//通过年和月，拿到每个月最大天数function getMaxDay(year,month){if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){return 31;}else if(month==4||month==6||month==9||month==11){return 30;}else{return isleap(year);}}//初始化日历function getDate(year,month){   var maxDay = getMaxDay(year,month);   var day = 1;   var date = new Date(year,month-1,1);   var week = date.getDay();   while(true){   var tr = $("<tr></tr>");   for(var i=0;i<7;i++){   var td ;   if(day==1&&i==week){   td=$("<td>1</td>");   day++;   }else if(day>1&&day<=maxDay){   td=$("<td>"+day+"</td>");   day++;   }else{   td=$("<td> </td>");   }   tr.append(td);      }   $("tbody").append(tr);   if(day>maxDay)   break;   }}//判断是否是闰年function isleap(year){if(year%4==0&&year%100!=0||year%400==0){return 29;}else{return 28;}}//绑定两个下拉列表的改变事件$(".a").change(function(){$("tbody").empty();var year = $("#year").val();var month = $("#month").val();getDate(year,month);});})</script><style>#tb{border-collapse:collapse;}th,td{border:1px solid black;padding: 5px 5px;}td:hover{background-color: #000000;}</style></head><body>年<select id="year" class="a"></select> 月<select id="month" class="a"></select><table id="tb"><thead><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead><tbody></tbody></table></body></html>
阅读全文
0 0