简易日历代码

Posted 2020-07-12 zzjeny

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简易日历代码相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>tab选项卡扩展</title>
    <style type="text/css">
        html,body,div,ul,li,span,h2,p {
            margin: 0;
            padding: 0;
            font-family: ‘Microsoft YaHei‘, Arial;
            list-style: none;
            display: block;
        }

        .fix:after,
        .fix:before {
            display: table;
            content: ‘‘;
        }
        .fix:after {
            clear: both;
        }
        .fix {
            zoom: 1;
        }

        #tab {
            width: 300px;
            background: #eaeaea;
            margin: 50px auto;
            padding: 30px;
            overflow: hidden;
        }

        #tab ul li {
            width: 90px;
            height: 72px;
            padding-top: 18px;
            margin: 5px;
            background: #1f1f1f;
            color: #fff;
            text-align: center;
            line-height: 26px;
            float: left;
            cursor: pointer;
        }

        #tab ul li.current {
            background: #fff;
            color: #1f1f1f;
        }

        #tab p {
            margin-top: 10px;
            font-size: 18px;
        }
    </style>

    <script type="text/javascript">
        window.onload = tab;

        function tab() {
            var txt = [
                ‘爆竹声中一岁除，春风送暖入屠苏‘,
                ‘春风疑不到天涯，二月山城未见花‘,
                ‘洛阳三月花如锦，多少功夫织得成‘,
                ‘四月南风大麦黄，枣花未落桐荫长‘,
                ‘五月榴花照眼明，枝间时见子初成‘,
                ‘六月禾未秀，官家己修仓‘,
                ‘未会牵牛意若何，须邀织女弄金梭‘,
                ‘莫湃边地比京都，八月严霜草己枯‘,
                ‘九月天山风似刀，城南猎马缩寒毛‘,
                ‘十月清霜重，飘零何处归‘,
                ‘冬暖而儿号寒，年丰而妻啼饥‘,
                ‘腊后花期知渐近，寒梅巳作东风信‘
            ];
            var oDiv = document.getElementById("tab");
            var aLi = oDiv.getElementsByTagName("li");
            var aDiv = oDiv.getElementsByTagName("div")[0];

            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 = "current";
                    aDiv.innerHTML = "<h2>" + (this.index + 1) + "月</h2><p>" + txt[this.index] + "</p>";

                }
                
            }
        }
    </script>
</head>
<body>
    <div id="tab">
        <ul class="fix">
            <li class="current"><span>一月</span><span>Jan</span></li>
            <li><span>二月</span><span>Feb</span></li>
            <li><span>三月</span><span>Mar</span></li>
            <li><span>四月</span><span>Apr</span></li>
            <li><span>五月</span><span>May</span></li>
            <li><span>六月</span><span>Jun </span></li>
            <li><span>七月</span><span>Jul</span></li>
            <li><span>八月</span><span>Aug </span></li>
            <li><span>九月</span><span>Sep</span></li>
            <li><span>十月</span><span>Oct</span></li>
            <li><span>十一月</span><span>Nov</span></li>
            <li><span>十二月</span><span>Dec</span></li>
        </ul>
        <div>
            <h2>一月</h2>
            <p>爆竹声中一岁除，春风送暖入屠苏</p>
        </div>
    </div>
</body>
</html>

以上是关于简易日历代码的主要内容，如果未能解决你的问题，请参考以下文章