JS之日历实践附实现代码

程序是这个样子的：首先采集用户输入的年份和月份，经过计算获取该月份的最大天数，并获取月份第一天是星期几。然后在表格中填充该月份的具体信息。

<html> <head> <title>日历测试</title> <script> function getMonthJuZhen（date）{ if（arguments.length == 0）{ throw new Error（"need a date"）; } if（arguments[0] == null）{ throw new Error（"date is null or undefined"）; } if（arguments[0] instanceof Date）{ var monthjuzhen = new Array（5）; for（var r = 0 ; r < 5 ; r++）{ monthjuzhen[r] = [0,0,0,0,0,0,0]; } var maxDay = getMaxDay（arguments[0]）; arguments[0].setDate（1）; var r = 0; var c = arguments[0].getDay（）; for（var d = 1 ; d <= maxDay ; d++）{ monthjuzhen[r][c] = d; if（c == 6）{ if（r == 4）{ r = 0; } else{ r++; } c = 0; } else{ c++; } } return monthjuzhen; } else{ throw new Error（"need a date"）; } } function getMaxDay（date）{ if（arguments.length == 0）{ throw new Error（"need a date"）; } if（arguments[0] == null）{ throw new Error（"date is null or undefined"）; } if（arguments[0] instanceof Date）{ var tempDate = new Date（arguments[0].toString（））; if（arguments[0].getMonth（） == 11）{ tempDate.setFullYear（（tempDate.getFullYear（）+1））; tempDate.setMonth（0）; } else{ tempDate.setMonth（（tempDate.getMonth（）+1））; } return Math.floor（（tempDate.getTime（）-arguments[0].getTime（））/（1000*60*60*24））; } else{ throw new Error（"need a date"）; } } function updateDate（）{ var yearInput = document.getElementById（"yearinput"）; var monthInput = document.getElementById（"monthinput"）; try{ var year = parseInt（yearInput.value）; var month = parseInt（monthInput.value）; if（isNaN（year））{ if（isNaN（month））{ monthInput.value = ""; } yearInput.value = ""; return; } if（isNaN（month））{ monthInput.value = ""; return; } if（month > 12 || month < 1）{ monthInput.value = ""; return; } month--; var date = new Date（year,month）; var monthjuzhen = getMonthJuZhen（date）; var day; var dayvalue; for（var r in monthjuzhen）{ for（var c in monthjuzhen[parseInt（r）]）{ day = document.getElementById（r+"-"+c）; dayvalue = monthjuzhen[parseInt（r）][parseInt（c）]; if（dayvalue == 0）{ if（day.hasChildNodes（））{ day.removeChild（day.firstChild）; } day.onmouseover = null; day.onmouseout = null; day.onclick = null; continue; } if（day.hasChildNodes（））{ day.firstChild.nodeValue = dayvalue; } else{ day.appendChild（document.createTextNode（dayvalue））; } day.setAttribute（"date",year+"-"+month+"-"+dayvalue）; day.onmouseover = function（）{this.style.backgroundColor = "black";this.style.color = "white";}; day.onmouseout = function（）{this.style.backgroundColor = "white";this.style.color = "black"}; day.onclick = subDate; } } } catch（e）{ alert（e）; } } function subDate（）{ var date = this.getAttribute（"date"）.match（/（d+）-（d+）-（d+）/）; alert（new Date（date[1],date[2],date[3]））; } </script> </head> <body> <table style="background-color:white;"> <tr> <td colspan="7"> <input id="yearinput" type="text" size="4" MAXLENGTH="4" onchange="updateDate（）"/>年 <input id="monthinput" type="text" size="2" MAXLENGTH="2" onchange="updateDate（）"/>月  <span onclick="updateDate（）">更新</span></td> </tr> <tr> <td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td> </tr> <tr> <td id="0-0"></td><td id="0-1"></td><td id="0-2"></td><td id="0-3"></td><td id="0-4"></td><td id="0-5"></td><td id="0-6"></td> </tr> <tr> <td id="1-0"></td><td id="1-1"></td><td id="1-2"></td><td id="1-3"></td><td id="1-4"></td><td id="1-5"></td><td id="1-6"></td> </tr> <tr> <td id="2-0"></td><td id="2-1"></td><td id="2-2"></td><td id="2-3"></td><td id="2-4"></td><td id="2-5"></td><td id="2-6"></td> </tr> <tr> <td id="3-0"></td><td id="3-1"></td><td id="3-2"></td><td id="3-3"></td><td id="3-4"></td><td id="3-5"></td><td id="3-6"></td> </tr> <tr> <td id="4-0"></td><td id="4-1"></td><td id="4-2"></td><td id="4-3"></td><td id="4-4"></td><td id="4-5"></td><td id="4-6"></td> </tr> </table></body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]