您的位置：首页 > 其它

简易年历

2013-11-15 12:37 344 查看
（1）功能描述：

鼠标经过月份，下面显示对应月份的节日。

（2）实现代码：

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<ul id="months">
<li class="active"><h2>1</h2><span>JAN</span></li>
<li><h2>2</h2><span>FER</span></li>
<li><h2>3</h2><span>MAR</span></li>
<li><h2>4</h2><span>APR</span></li>
<li><h2>5</h2><span>MAY</span></li>
<li><h2>6</h2><span>JUN</span></li>
<li><h2>7</h2><span>JUL</span></li>
<li><h2>8</h2><span>AUG</span></li>
<li><h2>9</h2><span>SEP</span></li>
<li><h2>10</h2><span>OCT</span></li>
<li><h2>11</h2><span>NOV</span></li>
<li><h2>12</h2><span>DEC</span></li>
</ul>
<div id="content">
<h2>1月节日</h2>
<p>元旦：1月1日至3日放假三天。</p>
</div>
</div>
</body>
</html>


CSS：

<style>
*{margin: 0px;padding: 0px;}
body{padding: 100px;font-size: 13px;}
li{list-style: none;}
#box{width: 294px;background-color: #eaeaea;overflow: hidden;}
#box #months{padding: 5px;overflow: hidden;}
#box #months li{float: left;width: 59px;height: 59px;background-color: #424242;margin: 5px;text-align: center;color: #fff;border: 1px solid #424242;cursor: pointer;}
#box #months li h2{height: 30px;line-height: 30px;}
#box #months li span{display: block;height: 30px;line-height: 30px;}
#box #months li.active{color: #ff6699;background-color: #fff;border: 1px solid #424242;}
#box #months li.active h2{}
#box #months li.active span{}
#box #content{background-color: #f1f1f1;color: #666666;margin: 10px;border: 1px solid #fff;padding-left: 5px;}
#box #content h2{font-size: 14px;height: 30px;line-height: 30px;}
#box #content p{height: 24px;line-height: 24px;}
</style>


JS：

<script>
window.onload=function(){
var gala = [
'元旦：1月1日至3日放假三天。',
'春节：2月2日至8日放假7天。',
'妇女节：3月8日妇女节，与我无关。',
'清明节：4月3日至5日放假3天',
'劳动节：4月30日至5月2日放假3天。',
'端午节：6月4日至6日放假3天。',
'小暑：7月7日小暑。不放假。',
'七夕节：8月6日七夕节。不放假。',
'中秋节：9月10日至12日放假3天。',
'国庆节：10月1日至7日放假7天。',
'立冬：11月8日立冬。不放假。',
'艾滋病日:12月1日'
]
// alert(gala[0]);
var aLi = document.getElementById('months').getElementsByTagName('li');
var oBox = document.getElementById('content');

for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
for(var j=0;j<aLi.length;j++){
aLi[j].className='';
}
this.className='active';
oBox.innerHTML='<h2>'+(this.index+1)+'月节日</h2><p>'+gala[this.index]+'</p>';
}

}
}
</script>


(3)效果图如下所示：





(4)学习要点：

　　将数据存放在数组中。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航