JS之简易小日历

<div id="div1">
			<ul>
				<li class="active">一月</li>
				<li>二月</li>
				<li>三月</li>
				<li>四月</li>
				<li>五月</li>
				<li>六月</li>
				<li>七月</li>
				<li>八月</li>
				<li>九月</li>
				<li>十月</li>
				<li>十一月</li>
				<li>十二月</li>
			</ul>
			<div id="div2">
			</div>
		</div>

css:

body,div{
	margin: 0 auto;
}
#div1{
				width: 400px;
				height: 600px;
				border: 1px solid black;
				background: silver;
			}
			#div1 ul{
				width: 400px;
				height: 600px;
				text-align: center;
				
			}
			#div1 ul li{
				list-style-type: none;
				float: left;
				width: 100px;
				height: 100px;
				line-height: 100px;
				margin:5px;
				color:white;
				background: #575757;
				border: 1px solid white;
			}
			#div1 .active{
				background:white;
				color:black;
				border: 1px solid black;
			}
			#div2{
				margin-top: -150px;
				text-align: center;
				clear: both;
				width: 320px;
				height: 100px;
				background-color: black;
				border: 1px solid white;
				color:white;
			}

JS

<script>
		window.onload=function()
		{
				var	arr=["正月闹新春",
"早春二月 乍暖还寒",
"阳春三月 花红柳绿好踏青",
"四月樱花灿烂",
"五月到处繁花似锦",
"六月小荷才露尖尖角",
"七月夜空萤火虫闪烁",
"八月桂花飘香,江河水涨",
"九月香山红似火",
"十月瓜果飘香",
"十一月唯有金菊耐寒",
"十二月银装素裹"];
			var odiv=document.getElementById('div1');
			var obtn=odiv.getElementsByTagName('li');
			var otxt=odiv.getElementsByTagName('div')[0];
			for (var i=0; i<obtn.length;i++) {
				obtn[i].index=i;
				obtn[i].onmouseover=function()
				{
					for (var i=0; i<obtn.length;i++) {
						obtn[i].className='';
					}
					this.className="active";
					otxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
				};
			}
		}
	</script>