DOM操作简易年历案例

最新推荐文章于 2024-07-29 17:58:41 发布

江南1232

最新推荐文章于 2024-07-29 17:58:41 发布

阅读量168

点赞数

分类专栏： DOM操作文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_36378250/article/details/127501028

版权

DOM操作专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该博客展示了一个使用DOM操作创建的简易年历案例。通过CSS样式设置，创建了带有背景色和边框的月份列表。JavaScript代码用于监听每个月份的悬停事件，当鼠标移过某个月份时，会高亮显示该月份，并在侧边框内显示相应的标题和内容。内容包括一年中不同月份的节日或活动简介，如新年、情人节等。

摘要由CSDN通过智能技术生成

DOM操作简易年历案例

<style>
.box{
    background-color: #aaa;
    width: 150px;
    padding: 10px;
}
.box ul{
    list-style: none;
    padding: 0;
    margin: 0;
    width: 150px;
}
.box ul:after{
    clear: both;
    content: '';
    display: block;
}
.box ul li{
    width: 40px;
    height: 40px;
    background-color: #222;
    color: #fff;
    float: left;
    margin: 5px;
    text-align: center;
}
.box ul li h3{
    margin: 0;
    padding: 0;
    font-size: 16px;
}
.box ul li span{
    font-size: 12px;
}
.box .wrap{
    width: 140px;
    height: 80px;
    background-color: #ccc;
    padding-left: 10px;
}
.box ul li.active{
    border: 1px solid #000;
    width: 38px;
    height: 38px;
    background-color: #fff;
    color: hotpink;
}
</style>
<body>
<div class="box">
    <ul>
        <li class="active">
            <h3>1</h3>
            <span>一月</span>
        </li>
        <li>
            <h3>2</h3>
            <span>二月</span>
        </li>
        <li>
            <h3>3</h3>
            <span>三月</span>
        </li>
        <li>
            <h3>4</h3>
            <span>四月</span>
        </li>
        <li>
            <h3>5</h3>
            <span>五月</span>
        </li>
        <li>
            <h3>6</h3>
            <span>六月</span>
        </li>
        <li>
            <h3>7</h3>
            <span>七月</span>
        </li>
        <li>
            <h3>8</h3>
            <span>八月</span>
        </li>
        <li>
            <h3>9</h3>
            <span>九月</span>
        </li>
        <li>
            <h3>10</h3>
            <span>十月</span>
        </li>
        <li>
            <h3>11</h3>
            <span>十一月</span>
        </li>
        <li>
            <h3>12</h3>
            <span>十二月</span>
        </li>
    </ul>
    <div class="wrap">
        <h4>标题</h4>
        <p>内容</p>
    </div>
</div>
</body>
<script>
// 定义内容
var arr = [
    {
        title: '1月',
        content: '新年快乐！'
    },
    {
        title: '2月',
        content: '情人节快乐！'
    }
    ,{
        title: '3月',
        content: '植树节'
    },
    {
        title: '4月',
        content: '愚人节骗你'
    },
    {
        title: '5月',
        content: '劳动节开始劳动'
    },
    {
        title: '6月',
        content: '儿童节跟我们无关'
    },
    {
        title: '7月',
        content: '七夕约会'
    },
    {
        title: '8月',
        content: '中秋夜'
    },
    {
        title: '9月',
        content: '登高'
    },
    {
        title: '10月',
        content: '放个小长假'
    },
    {
        title: '11月',
        content: '光棍节'
    },
    {
        title: '12月',
        content: '圣诞节'
    }
]
// 获取所有li
var lis = document.querySelectorAll('.box ul li')
// 遍历
for(var a=0; a<lis.length; a++) {
    function fn(a) {
        // 给每一个li添加事件
        lis[a].onmouseover = function() {
            // 将所有的li的类名去掉
            for(var b=0; b<lis.length; b++) {
                lis[b].className = ''
            }
            // 给当前的li添加active类名
            lis[a].className = 'active'
            // 根据当前li的下标，获取到数组中对应下标的对象
            var obj = arr[a]
            // 将对象中的标题和内容放在div中的标题和p标签中
            document.querySelector('.wrap h4').innerText = obj.title
            document.querySelector('.wrap p').innerText = obj.content
        }
    }
    fn(a)
}
</script>