JS之日历实践附实现代码

时间:2020-05-12 人气:0

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

<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> 
<div><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> 
</div> 
</body> 
</html>

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

加载全部内容