萬年歷，想必大家對它都不陌生吧，下面是使用jquery寫的一個萬年歷示例，喜歡的朋友可以參考下
代碼如下: <!Doctype html><html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <style> .main{ width:600px; height:350px; background:gray; margin-left: auto; margin-right: auto; overflow:hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .title{ text-align:center; } .date{ float:left; padding-left:31px; } .date1{ float:left; width:20px; height:20px; padding-top:10px; padding-left:30px; padding-right:30px; } .content{ margin-left:25px; } </style> <script type="text/javascript" src="jquery.min.js"></script> <script> function getTime(year,month,day){ y = year m = month d = day var myDate = new Date(year,month-1,day); return myDate; } function days_in_month(year, month) { y = year; m = month; return 32 - new Date(y, m - 1, 32).getDate(); } function view(year,month){ var w = getTime(year,month,1).getDay()-1; var num = days_in_month(year,month); var index = 1; //console.log(w); var data = new Array(); for(var d = 0; d < num+w; d++){ if(d<w){ data[d] = ''; }else{ data[d] = index; index++; } } $("#content").html(''); for(var k =0;k < data.length;k++){ if(k%7==0){ $("#content").append("<div id='t"+k+"' class='date1'>"+data[k]+"</div><br>"); }else{ $("#content").append("<div id='t"+k+"' class='date1'>"+data[k]+"</div>"); } } $("#content > div").mouseover(function(){ if($(this).text()!=''){ $(this).css('background','red'); } }); $("#content > div").mouseout(function(){ if($(this).text()!=''){ $(this).css('background','gray'); } }); } $(document).ready(function (){ for(var t = 1970; t < 2999; t++){ $("#yearsel").append("<option value ='"+t+"'>"+t+"</option>"); } for(var y = 1; y < 13;y++){ $("#monthsel").append("<option value ='"+y+"'>"+y+"</option>"); } var year = new Date().getFullYear(); var month = new Date().getMonth()+1; var day = new Date().getDate(); var w = getTime(year,month,1).getDay()-1; var num = day + w -1; $("#yearsel").change(function(){ year = $("#yearsel option:selected").text(); month = $("#monthsel option:selected").text(); view(year,month); }); $("#monthsel").change(function(){ year = $("#yearsel option:selected").text(); month = $("#monthsel option:selected").text(); view(year,month); }); var oDate = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日',]; for(var i = 0;i < 7;i++){ $("#title").append("<div class='date'><b>"+oDate[i]+"</b></div>"); } $("#yearsel option[value='"+year+"']").attr("selected", true); view(year,month); //標記當前日期 $("#t"+num).css('background','yellow'); }); </script> </head> <body> <div id="main" class="main"> <center><h3>萬年歷</h3></center> <select id="yearsel"> </select>年 <select id="monthsel"> </select>月<br><br> <div id="title" class="title"> </div> <div id="content" class="content"> </div> </div> </body> </html>