js基础练习---获取数组内容实现简单日历的效果

<script type="text/javascript">

var myarr=[
"第一个月比较寒冷",
"第二月大年的日子",
"第三月开春的日子降临了啊。。。。。",
"第四个月是个准备迎接夏天到来的日子了啊   哈哈哈哈啊哈哈。。。。。。",
"第五个月",
"第六个月",
"第七个月",
"第八个月",
"第九个月",
"第十个月",
"第十一个月",
"第十二个月"
]

window.onload=function()
{
var ouli=document.getElementById('uli').getElementsByTagName('li');
var otxt=document.getElementById('civ');
var i=0;
for(i=0;i<ouli.length;i++)
{
ouli[i].index=i;
ouli[i].onclick=function()
{
for(i=0;i<ouli.length;i++)
{
ouli[i].className="";
};
this.className="active";
otxt.innerHTML="<h2>"+(this.index+1)+"月活动</h2><p>"+myarr[this.index]+"</p>"
};
};
<script>

<ul id="uli">
<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="civ">
<h2>1月活动</h2>
<p>第一个月比较寒冷</p>
</div>