简易年历

（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)学习要点：

　　将数据存放在数组中。

高否？富否？帅否？否？滚去学习！