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

日历

2015-10-30 18:19 981 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>备忘录</title>
</head>
<style>
*{
margin: 0;
padding: 0;
font-family: '微软雅黑';
}
.box{
width: 186px;
margin: 50px auto
}
ul{
width: 186px;
margin: 0 auto;
border: 1px solid;
overflow: hidden;
list-style: none;
}
ul li{
float: left;
width: 50px;
height: 50px;
margin: 5px;
text-align: center;
line-height: 50px;
border: 1px solid #ddd;
cursor: pointer;
}
ul li.active{
background: yellow
}
.txt{
width: 168px;
height: 100px;
padding: 10px;
background: #eee
}
</style>
<body>

<div class="box" id="box">
<ul class="month">
<li>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 class="txt">
<h3>1月</h3>
<p>干点什么吧</p>
</div>
</div>

</body>
<script>
var aAct = [
'大叔挂石锁散步',
'多地停开单身证明',
'允许普遍二孩',
'李冰冰任泉聚会',
'电信再现重大漏洞',
'武夷山天价麝香肉',
'蔡少芬晒素颜自拍',
'十三五规划',
'九九九九加建军节建军节',
'是是是是是是是是是是',
'实施一一一一一一',
'十二十二十二十二十二'
]
window.onload = function(){
var oLi = document.getElementsByTagName('li');
var oTxt = document.getElementById('box').getElementsByTagName('div')[0];

var i=0;
for(i=0; i<oLi.length; i++){

oLi[i].index = i;
oLi[i].onmouseover = function(){
for(i=0; i<oLi.length; i++){
oLi[i].className = '';
}
this.className = 'active';
oTxt.innerHTML = '<h3>'+ (this.index+1) +'月份活动</h2><p>'+aAct[this.index]+'</p>'
}
}
}
</script>
</html>

效果图：

鼠标移到不同月份，显示不同事件

用到遍历数组-onmouseover-for循环

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

标签： JavaScript

相关文章推荐

新的分享

章节导航