日历控件的JavaScript实现-优快云博客

1、学习js，要先了解html，比如说html加载，html中的所有元素都存在于document中，所以我用document.getElementById(id)这个方法才能取到我们想要的元素。

2、在页面运行时加载对象是顺序执行的，比如我们的javascript写在head中，那么页面就会先加载head中的脚本，然后再加载body中的元素，所以就会出现我们在脚本刚开始加载就用document取值，导致出现未定义或者取值为空的错误，但是我们必须要在脚本加载时取元素的话，有三种方法：(1)window.onload=function() {取body中的元素}，这个就是等页面加载完成后执行。（2）在body中定义onload方法，例如<body onload="js函数（）"></body>,这个是在body加载完成后执行，也可以在刚开始取到元素。(3)把脚本写在body下方，这样html顺序加载时，就可以先加载body后加载脚本，同样可以取到body中的元素。

下面是一个日历控件的例子

<html>
	<head>
		<title>日历控件</title>
		<style type="text/css">
			
			.td{
				width:200px;
				text-align:center;
				background-color:#e5e5e5;;
				font-size:25px;
				
			}
		</style>
	</head>
	<body onload="">
		<form id="form1">
		<table id="tb" name="tb" width="500" style="border:0px; margin:10px; padding:10px;">
			 <tr>
                <td colspan="3">
					<select id="selectYear" name="selectYear" size="1" onchange="showYearDate(document.getElementById('selectYear').value);"> 
					
					
					</select>
					<span>年</span>
				</td>
				<td colspan="3"><input id="showMonth" type="text" onclick="showDialog(this.id);"/></td>
            </tr>
			<tr style="background-color:#e5e5e5;">
				<td class="td">日</td>
				<td class="td">一</td>
				<td class="td">二</td>
				<td class="td">三</td>
				<td class="td">四</td>
				<td class="td">五</td>
				<td class="td">六</td>				
			</tr>
			<tr style="background-color:#  ;color:#ff00ff; size:16px;">
                <td colspan="7"></td>
            </tr>
		</table>
		</form>
	</body>
	
	<script type="text/javascript" Language="Javascript">
			document.write("<div id=\"showDate\"  style=\"display: none;  Z-INDEX: 2; BACKGROUND: #effaff; FILTER: Alpha(opacity=85); position: absolute; WIDTH: 200px; LINE-HEIGHT: 22px; padding:6px; border: 1px solid #bae1f0; font-size:14px;\"></div>");
			var date=new Date();
			var month=date.getMonth();
			var year=date. getFullYear ();
			var day=date.getDate();
			var isLeapYear=false;
			var monthArray=new Array();
			var dayCountArray=new Array();	
			var id="";
			//这个月1号是星期几
			var firstDay = new Date((month+1) + "-1-" + year.toString()).getDay(); 
			
			var table = document.getElementById('tb');
		
			for(var i=0;i<12;i++)
			{
				monthArray[i]=(i+1)+"月";
			}
					
			isLeapYearFunction();
			getDayCountOfMonth();
			insertToTable();
			insertSelectYear();
			
			function insertSelectYear()
			{
				var selectYear=document.getElementById("selectYear");
				var result="";
				
				for(var i=1970;i<2050;i++)
				{
					
					if(i==year)
					{
						result+="<option selected>"+i+"</option> ";
					}
					else
					{
						result+="<option>"+i+"</option> ";
					}
				}
				selectYear.innerHTML=result;
			}
			
			//向日历中插入日期信息
			function insertToTable()
			{
				
				for(var i=2;i<8;i++)
				{
									
					var tRow = table.insertRow(i);
					for(var j=0;j<7;j++)
					{
						var d=(i-2)*7-parseInt(firstDay)+j+1
						var tCell = tRow.insertCell(j);
						
						if(d<=0)
						{
							if(month>0)
							{
								d=dayCountArray[month-1]+d;
								tCell.innerHTML=d;
							}
							else
							{
								d=31+d;
								tCell.innerHTML=d;
							}
							setFont(tCell,j,false);
							continue;
						}
						
						if(d>0)
						{
							tCell.innerHTML=d;
						}
						
						if(d>dayCountArray[month])
						{
							d=d-dayCountArray[month];
							tCell.innerHTML=d;
							setFont(tCell,j,false);
							continue;
						}
						
						if(d==day)
						{
							
							tCell.innerHTML="<a href>"+d+"</a>";
						}
						setFont(tCell,j,true);
					}
				}
			}
			
			//为日期设置不同的字体颜色
			function setFont(cell,week,curMonth)
			{	
				cell.style.fontSize="25px";
				cell.style.textAlign="center";
				if(week%6==0)
				{
					cell.style.color="red";
				}
				else 
				{
					cell.style.color="blue";
				}
				
				if(!curMonth)
				{
					//cell.style.backgroundColor="gray";
					cell.style.color="gray";
				}
				//backgroundColor
			}
		
			
			//获取当前年的所有月份的天数
			function getDayCountOfMonth()
			{
				for(var i=0;i<12;i++)
				{
					if(i==0||i==2||i==4||i==6||i==7||i==9||i==11)
					{
						dayCountArray[i]=31;
					}
					else if(i==1)
					{
						if(isLeapYear)
						{
							dayCountArray[i]=29;
						}
						else
						{
							dayCountArray[i]=28;
						}
					}
					else
					{
						dayCountArray[i]=30;
					}
				}
				
				
				
			}
			//是否是闰年，4年一闰，400年一闰，百年不闰
			function isLeapYearFunction()
			{
				
				if(year%4==0)
				{
					isLeapYear=true
				}
				
				if(year%100==0)
				{
					isLeapYear=false;
				}
				
				if(year%400==0)
				{
					isLeapYear=true;
				}
				
			}
		
			function showDialog(textId)
			{
				id = textId;
				var divVal = document.getElementById("showDate");
				var text=document.getElementById(textId);
				var clickX = event.clientX;
				var clickY = event.clientY;
				//alert(clickX+","+clickY);
				// 加px 兼容火狐
				divVal.style.left = (clickX + 1) + "px"; 
				divVal.style.top = (clickY + 1) + "px"; 
				// 得到系统日期
				var nowDate = new Date();
				divVal.innerHTML=showAllMonth();
				divVal.style.display = "block";
				//改变鼠标进入月份选择区域时变化样式
				divVal.style.cursor="hand";
			}
			
			function showAllMonth()
			{
				var result="";
				result+="<table>";
				for(var i=0;i<3;i++)
				{
					result+="<tr>";
					for(var j=0;j<4;j++)
					{
						var flag=i*4+j;
						result+="<td onclick='showMonthDate("+flag+")'>"+monthArray[flag]+"</td>"
					}
					result+="</tr>"
				}
				return result;
			}
			
			function showMonthDate(MM)
			{
				
				var divVal = document.getElementById("showDate");
				divVal.style.display = "none";
				for(var i=7;i>1;i--)
				{
					table.deleteRow(i);
				}
				month=MM;
				
				firstDay = new Date((month+1) + "-1-" + year.toString()).getDay(); 
				
				getDayCountOfMonth();
				
				insertToTable();
				
				var temp=document.getElementById(id);
				
				temp.value=monthArray[month];
			}
			
			function showYearDate(yyyy)
			{
				
				for(var i=7;i>1;i--)
				{
					table.deleteRow(i);
				}
				year=yyyy;
				firstDay = new Date((month+1) + "-1-" + year.toString()).getDay(); 
				
				getDayCountOfMonth();
				
				insertToTable();
				
			}
	</script>
</html>

JS使用一