[读码时间] 简易JS年历

说明：代码来自网络。注释为笔者学习时添加。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>简易JS年历</title>
    <style>
        body,ul,li,h2,p{ /*清除内外边距*/
            margin:0;
            padding:0;
        }
        body{
            font:12px/1.5 Tahoma;/*行高18px*/
        }
        #calendar{
            width:248px;
            overflow:hidden;
            zoom:1;
            background:#eaeaea;/*背景浅白色*/
            margin:10px auto;/*左右置中*/
            padding:0 0 10px 10px;
        }
        #calendar ul{
            overflow:hidden;
            zoom:1;
        }
        #calendar li{
            color:#fff;/*字体白色*/
            float:left;/*左浮动，水平排列*/
            width:40px;
            height:40px;
            cursor:pointer;
            font-size:14px;/*字号*/
            text-align:center;/*文本居中*/
            background:#424242;/*黑色*/
            line-height:1.3;/*行高系数，即1.3X12=15.6，取整16*/
            list-style-type:none;
            border:1px solid #424242;/*黑色*/
            margin:10px 10px 0 0;
            padding:5px;
        }
        #calendar li.current{
            color:#f69;/*粉红色*/
            background:#fff;/*白色*/
        }
        #calendar li strong{
            display:block;/*显示为块元素*/
            font-size:18px;
        }
        #msg{
            color:#666;/*灰黑色*/
            background:#f1f1f1;/*灰白色*/
            border:1px solid #fff;/*白色*/
            margin:10px 10px 0 0;
            padding:5px;
        }
        #msg h2{
            font-size:14px;
        }
    </style>
    <script>
        window.onload = function () {
            var oLi = document.getElementById("calendar").getElementsByTagName("li");//链式调用，获取calendar内的所有li,返回一个集合
            var oMsg = document.getElementById("msg");//获取msg div元素引用
            var oP = oMsg.getElementsByTagName("p")[0];//获取msg信息盒中的p元素中的第一个
            var oStrong = oMsg.getElementsByTagName("strong")[0];//获取msg中的strong元素中的第一个，因获得的是一个集合，所以需要用[]取第一个
            var oArray = [  //数组字面量
        "元旦：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日<br />废除奴隶制国际日:12月2日。"
            ];
            for(var i=0;i<oLi.length;i++){
                oLi[i].index = i;//佩服一下，代码的作者对对象的运用很纯熟，直接在对象上添加index忏悔
                oLi[i].onmouseover = function () {
                    for (var n = 0; n < oLi.length; n++) oLi[n].className = "";//先重置所有li元素的类为无
                    this.className = "current";//给当前被点击元素添加类
                    oP.innerHTML = oArray[this.index];//index的作用出来了
                    oStrong.innerHTML = this.index + 1;//index值由0开始的，故需加1
                }
            }
        }
    </script>
</head>
<body>
    <!--外部div包裹一个ul列表和一个子div-->
    <div id="calendar">
        <ul>
            <li><strong>1</strong>JAN</li>
            <li><strong>2</strong>FER</li>
            <li><strong>3</strong>MAR</li>
            <li><strong>4</strong>APR</li>
            <li><strong>5</strong>MAY</li>
            <li class="current"><strong>6</strong>JUN</li>
            <li><strong>7</strong>JUL</li>
            <li><strong>8</strong>AUG</li>
            <li><strong>9</strong>SEP</li>
            <li><strong>10</strong>OCT</li>
            <li><strong>11</strong>NOV</li>
            <li><strong>12</strong>DEC</li>
        </ul>
        <div id="msg">
            <h2>
                <strong>6</strong>
            </h2>
            <p>端午节：6月4日至6日放假3天。</p>
        </div>
    </div>
</body>
</html>
View Code