JS实现迷你日历

最新推荐文章于 2024-07-19 12:47:14 发布

yl107

最新推荐文章于 2024-07-19 12:47:14 发布

阅读量328

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/yl107/article/details/70919913

版权

js 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日历</title>
    <style>
        *{
            margin:0;
            padding: 0;
            font-size: 12px;
        }
        #box{
            width: 130px;
            height: 200px;
            background-color:#EAE9E9;
            margin:100px auto;
        }
        ul{
            list-style-type:none;
            overflow: hidden;
            width: 115px;
            margin:0 auto;
        }
        li{
            margin:3px;
            width: 30px;
            height: 30px;
            color: #fff;
            float:left;
            background-color:#424242;
            text-align: center;
            border:1px solid #424242;
        }
        #cont{
            width: 110px;
            height: 35px;
            background-color: #F1F1F1;
            margin:0 auto;
        }
        #cont>p{
            margin:5px 0 0 5px;
            line-height: 12px;
        }
        li>p:first-child,
        #cont>p:first-child{
            font-weight: 700;
        }
        .active{
            background-color: #fff;
            color: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li class="active"><p>1</p><p>JAN</p></li>
            <li><p>2</p><p>FER</p></li>
            <li><p>3</p><p>MAR</p></li>
            <li><p>4</p><p>APR</p></li>
            <li><p>5</p><p>MAY</p></li>
            <li><p>6</p><p>JUN</p></li>
            <li><p>7</p><p>JUL</p></li>
            <li><p>8</p><p>AUG</p></li>
            <li><p>9</p><p>SEP</p></li>
            <li><p>10</p><p>OCT</p></li>
            <li><p>11</p><p>NOV</p></li>
            <li><p>12</p><p>DEC</p></li>
        </ul>
        <div id="cont">
            <p>1月活动</p>
            <p>元旦快乐</p>
        </div>
    </div>
    <script>
        var lis = document.getElementsByTagName('li');
        var cont = document.getElementById('cont');
        // console.log(cont.innerHTML);
        var i;
        function clear(){
            for(i in lis){
                lis[i].className = '';
            }
        }
        var arr = ['元旦快乐','情人节快乐','春来了','放假了','五一快乐','六一节','生日快乐','假期快乐','假期结束','十一放假','光棍节快乐','双十二'];
        for(i in lis){
            lis[i].index = i;   
            lis[i].onmouseover = function(){
                clear();
                this.className = 'active';
                // console.log(typeof this.index);
                // var n = this.index + 1;
                cont.innerHTML = "<p>" + (parseInt(this.index)+1) + "月活动</p><p>" + arr[this.index] +  "</p>";
            }
        }
    </script>
</body>
</html>