js日历简单版

最新推荐文章于 2024-05-17 14:54:19 发布

s_psycho

最新推荐文章于 2024-05-17 14:54:19 发布

阅读量2.9k

点赞数

本文链接：https://blog.csdn.net/weixin_42413689/article/details/80924064

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
        <style>
            *{margin:0;
                padding:0;
            list-style: none}
            .box1{
                width: 400px;
                height: 600px;
            background: #cccccc;
            margin: 10px auto;
            border-top: 1px solid}
            li{
                width: 100px;
                height: 100px;
                background: black;
                float: left;
                margin: 5px 10px;
                color:white;
                text-align: center;
                line-height: 100px;
            }
             ul{
                 width: 360px;
                 height: 460px;
                 margin:0px auto;
             }
            .box2{
                width: 360px;
                height: 120px;
                background: red;
                margin:0 auto;
            }
            .box2>div{
                width: 360px;
                height: 120px;
                color: white;
                text-align: center;
                line-height: 120px;
                display: none;
            }
            .act{
                background: blue;
            }
            .box2 >.active{
                background: blue;
                color:black;
                display:block ;
            }
        </style>
</head>
<body>
<div class="box1">
    <ul>
        <li class="act">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
    <div class="box2">
        <div class="active">1月</div>
        <div>2月</div>
        <div>3月</div>
        <div>4月</div>
        <div>5月</div>
        <div>6月</div>
        <div>7月</div>
        <div>8月</div>
        <div>9月</div>
        <div>10月</div>
        <div>11月</div>
        <div>12月</div>
    </div>
</div>
<script>
    var arrli=document.getElementsByTagName("li");
    var arrdiv=document.getElementsByClassName("box2")[0].getElementsByTagName("div");
    for(var x=0;x<arrli.length;x++){
        arrli[x].index=x;
        arrli[x].onmouseover=function () {
            for(y=0;y<arrli.length;y++){
                arrli[y].className="";
                arrdiv[y].className="";
            }
            this.className="act";
            arrdiv[this.index].className="active"

        }
        arrli[x].onmouseout=function () {
            for (y = 0; y < arrli.length; y++) {
                arrli[y].className = "";
                arrdiv[y].className = "";
            }
        }
    }
</script>
</body>
</html>

s_psycho

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js日历简单版

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-
复制链接

扫一扫