js实现简易月历

<style>#yuefen{width: 240px;height: 320px;background: #E6E6E6;}#yuefen ul{padding: 0px;}ul li{display: block;width: 60px;height: 60px;margin: 10px;float: left;list-style: none;background: #66D9EF;line-height: 60px;text-align: center;font-size: 22px;}#content{width: 200px;height: 100px;background: #BFE574;padding: 20px;}.active{font-weight: bold;background: yellow;}</style>

</pre><pre name="code" class="html"><script>window.onload=function () {var arr=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];var odiv=document.getElementById('yuefen');var oli=odiv.getElementsByTagName('li');var ocon=document.getElementById('content');for (var i = 0; i < oli.length; i++) {oli[i].index=i;oli[i].onmouseover=function (){for (var i = 0; i < oli.length; i++) {oli[i].className='';}this.className='active';ocon.innerHTML=arr[this.index];}};}</script>

</pre><pre name="code" class="html">    <div id="yuefen"><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><div id="content">一月</div>```