万年历

作者: 任仪凡 | 来源:发表于2018-08-06 18:12 被阅读0次

js
2018-09-11
2018-09-11
点滴...13
生成日历(Linux)
3.9日
万年历（1990之后）
手机上的第一万年是你的本命年吗？❤️
2018.8.5
第十四天_java正则表达式（2018-08-13）

<style>
    *{
        margin:0;
        padding:0;
    }
    li{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    
    .ul{
        width:500px;
        background: #999;
        overflow: hidden;
        padding-bottom: 10px;
    }
    .ul li{
        float:left;
        width:100px;
        margin-left:20px;
        height:50px;
        line-height: 50px;
        text-align: center;
        background: #000;
        color:#fff;
        margin-top:10px;
    }
    div{
        width:500px;
        height:50px;
        border:1px solid #000;
    }
    .ul>li>ul{
        display:none;
    }
</style>
<body>
    <ul class='ul'>
        <li>
            1
            <ul>
                <li>春节</li>
            </ul>
        </li>
        <li>
            2
            <ul>
                <li>二月二龙抬头</li>
            </ul>
        </li>
        <li>
            3
            <ul>
                <li>三八妇女节</li>
            </ul>
        </li>
        <li>
            4
            <ul>
                <li>4444444444</li>
            </ul>

        </li>
        <li>
            5
            <ul>
                <li>五月劳动节</li>
            </ul>
        </li>
        <li>
            6
            <ul>
                <li>666666666</li>
            </ul>
        </li>
        <li>
            7
            <ul>
                <li>777777777</li>
            </ul>
        </li>
        <li>
            8
            <ul>
                <li>888888888</li>
            </ul>
        </li>
        <li>
            9
            <ul>
                <li>999999999</li>
            </ul>
        </li>
        <li>
            10
            <ul>
                <li>十月一日国庆节</li>
            </ul>
        </li>
        <li>
            11
            <ul>
                <li>11111111111</li>
            </ul>
        </li>
        <li>
            12
            <ul>
                <li>1212121212</li>
            </ul>
        </li>
    </ul>
    <div></div>
    <script>
        var li = document.querySelectorAll('.ul>li');
        var div = document.querySelector('div');
        for(var i = 0; i < li.length; i++) {
            li[i].onmouseover = function() {
                this.style.background = '#fff';
                this.style.color = '#f00';
                div.innerHTML = this.children[0].children[0].innerHTML;
            }
            li[i].onmouseout = function() {
                this.style.background = '';
                this.style.color = '';
            }
        }
    </script>