js简单万年历

最新推荐文章于 2022-04-15 16:30:35 发布

smilesgp

最新推荐文章于 2022-04-15 16:30:35 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/smilesgp/article/details/72540914

版权

<!DOCTYPE html>
<html>
<head>
<title>万年历</title>
</head>
<style>
#tap ul{padding:0;}
#tap{width:300px;height:500px;background:#666;margin:0 auto ;}
#tap li{width:60px;height:60px;display:inline-block;border:1px solid #000;margin:10px;text-align:center;}
#tap .active{background:#fff;color:red;}
</style>
<body>

<div id="tap">
<ul>
<li>一月</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 style="padding:20px;text-align:center;">
<h2>一月玩什么</h2>
<p>一月去郊游</p>
</div>
</div>
<script>
var arr=[
'一月去郊游',
'二月月去郊游',
'三月去郊游',
'四月月去郊游',
'五月月去郊游',
'六月月去郊游',
'七月月去郊游',
'八月月去郊游',
'九月月去郊游',
'十月月去郊游',
'十一月去郊游',
'十二月去郊游',
]
var oDiv=document.getElementById('tap');
var oLi=oDiv.getElementsByTagName('li');
var oTxt=oDiv.getElementsByTagName('div')[0];

for(i=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].οnmοuseοver=function(){

for(i=0;i<oLi.length;i++){
oLi[i].className="";
};
this.className="active"
oTxt.innerHTML='<h2>'+(this.index+1)+'月玩什么</h2><p>'+arr[this.index]+'</p>'
}
}
</script>
</body>
</html>