您的位置：首页 > Web前端 > JavaScript

js简易年历

2015-08-14 16:43 615 查看

思路：利用数组记录每个月需要填充的内容

<body>
<div id="calendar">
<ul class="day">
<li class="active"><h1>1</h1><p>jan</p></li>
<li><h1>2</h1><p>fer</p></li>
<li><h1>3</h1><p>mar</p></li>
<li><h1>4</h1><p>apr</p></li>
<li><h1>5</h1><p>may</p></li>
<li><h1>6</h1><p>jun</p></li>
<li><h1>7</h1><p>jan</p></li>
<li><h1>8</h1><p>aug</p></li>
<li><h1>9</h1><p>sep</p></li>
<li><h1>10</h1><p>ocy</p></li>
<li><h1>11</h1><p>nov</p></li>
<li><h1>12</h1><p>dec</p></li>
</ul>
<div class="content"  id="content">
<h3>1月</h3>
<p>阿尔阿达控股V领</p>
</div>
</div>
</body>

<script>
var data=['年坏掉大减肥啊','修复好吧啊','大概大减肥啊','年身体任何性骚扰','小地方关系人红樱桃啊','小地方很高兴人体啊','否认他根本查询系统肥啊','年发热管肥啊','年坏掉大减肥啊','年坏掉大减肥啊','虽然对方沟通和独特的','reahgjgd'];//利用数组存储数据
window.onload=function(){
var oDiv=document.getElementById('calendar');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var oDiv2=document.getElementById('content');

for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
for(var i=0;i<aLi.length;i++){
aLi[i].className="";
}
this.className="active";
oDiv2.innerHTML="<h3>"+(this.index+1)+"月</h3>"+"<p>"+data[this.index]+"</p>";//利用innerHTML修改内容
}
}
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航