可动态切换日历demo

来源：互联网发布：知乎36经典回复编辑：程序博客网时间：2024/06/16 13:21

demo地址：http://codepen.io/tianzi77/pen/vOQbPY

看别人的demo.自己也尝试写了一下；小日历。

结构：

    <div id="calendar" name="calendar">        <ul>            <li class="current"><strong>1</strong>JAN</li>            <li class=""><strong>2</strong>FER</li>            <li class=""><strong>3</strong>MAR</li>            <li class=""><strong>4</strong>APR</li>            <li class=""><strong>5</strong>MAY</li>            <li class=""><strong>6</strong>JUN</li>            <li class=""><strong>7</strong>JUL</li>            <li class=""><strong>8</strong>AUG</li>            <li class=""><strong>9</strong>SEP</li>            <li class=""><strong>10</strong>OCT</li>            <li class=""><strong>11</strong>NOV</li>            <li class=""><strong>12</strong>DEC</li>        </ul>        <div id="message" class="message">            <h2>                <strong>1</strong>月节日            </h2>            <p>元旦：1月1日至3日放假三天。</p>        </div>    </div>

样式：

        body,        ul,        li,        h2,        p {            margin: 0;            padding: 0;        }        #calendar {            width: 248px;            overflow: hidden;            background: #abcdef;            margin: 10px auto;            padding: 0 0 10px 10px;        }        #calendar ul {            overflow: hidden;        }        #calendar ul li {            list-style: none;            color: #fff;            width: 40px;            height: 40px;            float: left;            border: 1px solid yellow;            text-align: center;            line-height: 1.3;            font-size: 14px;            margin: 10px 10px 0 0;            background: #424242;            padding: 5px;            cursor: pointer;        }        #calendar ul li.current {            color: #F69;            background: #fff;        }        #calendar li strong {            font-size: 18px;            display: block;        }        #message {            color: #666;            background: #f1f1f1;            border: 1px solid #fff;            margin: 10px 10px 0 0;            padding: 5px;        }        #message h2 {            font-size: 14px;        }

js表现：

      window.onload = function () {            var oLi = document.getElementById("calendar").getElementsByTagName("li");            var oMsg = document.getElementById("message");            var oP = oMsg.getElementsByTagName("p")[0];            var oStrong = oMsg.getElementsByTagName("strong")[0];            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;                oLi[i].onmouseover = function () {                    for (var n = 0; n < oLi.length; n++) oLi[n].className = "";                    this.className = "current";                    oP.innerHTML = oArray[this.index];                    oStrong.innerHTML = this.index + 1;                }            }        }

1 0