简易日历代码

Posted 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>

 

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

原生Js_制作简易日历

用jquery制作简易日历

帮忙改一下js日历的日期的显示格式

简易日历表

用Java画简易时钟

简易日历的制作