可动态切换日历demo

最新推荐文章于 2024-04-22 16:56:50 发布

u011263845

最新推荐文章于 2024-04-22 16:56:50 发布

阅读量1k

点赞数 1

分类专栏： javascript&&jquery 文章标签：日历结构 demo js

本文链接：https://blog.csdn.net/u011263845/article/details/47154635

版权

javascript&&jquery 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

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;
                }
            }
        }