简易年历

真的是非常简易了
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			div{
				margin: 50px auto;
				 400px;
				background: #ccc;overflow: hidden;
				padding: 30px;
			}
			ul{
				overflow: hidden;
			}
			li{
				list-style: none;float: left;
				 80px;margin: 10px;
				background: #666;height: 80px;
				text-align: center;line-height: 80px;
				font-size: 26px;color: #fff;
			}
			#txt{
				height: 60px; 300px;background: #fff;
			}
			.active{
				background: #ff0;color: #f00;
			}
		</style>
	</head>
	<body>
		<div id="calendar">
			<ul>
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
			</ul>
			<div id="txt">
				
			</div>
		</div>
		<script type="text/javascript">
			//简易年历
			var data = ['元旦1月1日','2月14日情人节','3月3日全国爱耳日', '4月1日愚人节',
			'5月1日国际劳动节','6月1日 国际儿童节', '7月1日中国共产党诞生日','8月1日中国人民解放军建军节','9月10日中国教师节', '10月1日中华人民共和国国庆节','11月9日消防宣传日','12月3日世界残疾人日' ];
			var oLi = document.getElementsByTagName("li");
			var oTxt = document.getElementById("txt");
			oTxt.innerHTML = data[0];
			for(var i = 0;i < oLi.length;i++){    //月份遍历
				oLi[i].index = i;
				oLi[i].onclick = function(){        //鼠标点击事件
					for(var j = 0;j < oLi.length;j++){
						oLi[j].className = "";
					}
				this.className = "active";
				oTxt.innerHTML = data[this.index];
				}
			}
			
		</script>
	</body>
</html>
(效果图不会放图...)