万年历

作者: 哇塞薛之谦 | 来源:发表于2018-08-12 16:24 被阅读0次

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

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