简易年历

效果图如下：

简易年历.gif

html结构代码：

<style>
.box{
    width: 210px;
    margin:50px auto;
    padding:10px;
    background-color: #e2e2e2;
}
.box ul:after{
    content:'';
    display:block;
    clear:both;
}
.box ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.box ul li{
    float:left;
    width: 58px;
    height: 58px;
    border:1px solid #fff;
    color:#fff;
    background-color: #333;
    margin:5px;
}
.box ul li:hover{
    cursor: pointer;
}
.box ul li h2,.box ul li p{
    padding: 0;
    margin: 0;
    text-align: center;
}
.box ul li h2{
    font-size: 18px;
    line-height: 30px;
}
.box ul li p{
    font-size: 14px;
}
.box>.active{
    background-color: #f1f1f1;
    padding:10px;
    margin:5px 5px 0;
}
.box>.active h3,.box>.active p{
    padding: 0;
    margin: 0;
}
.box>.active h3{
    font-size: 14px;
    color:#666;
}
.box>.active p{
    font-size: 12px;
    line-height: 30px;
}
.box ul li.active{
    border-color:#333;
    background-color: #fff;
    color:hotpink;
}
</style>
<div class="box">
    <ul>
        <li class="active">
            <h2>1</h2>
            <p>一月</p>
        </li>
        <li>
            <h2>2</h2>
            <p>二月</p>
        </li>
        <li>
            <h2>3</h2>
            <p>三月</p>
        </li>
        <li>
            <h2>4</h2>
            <p>四月</p>
        </li>
        <li>
            <h2>5</h2>
            <p>五月</p>
        </li>
        <li>
            <h2>6</h2>
            <p>六月</p>
        </li>
        <li>
            <h2>7</h2>
            <p>七月</p>
        </li>
        <li>
            <h2>8</h2>
            <p>八月</p>
        </li>
        <li>
            <h2>9</h2>
            <p>九月</p>
        </li>
        <li>
            <h2>10</h2>
            <p>十月</p>
        </li>
        <li>
            <h2>11</h2>
            <p>十一月</p>
        </li>
        <li>
            <h2>12</h2>
            <p>十二月</p>
        </li>
    </ul>
    <div class="active">
        <h3>1月</h3>
        <p>元旦放假，新年快乐！</p>
    </div>
</div>

js逻辑代码：

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:"圣诞节快乐，平安夜平安！"
    },
];
// 获取所有标签
var oLis = document.querySelectorAll('.box ul li');
var titleBox = document.querySelector('.box>.active>h3');
var contentBox = document.querySelector('.box>.active>p');
// 循环绑定事件
for(var i=0;i<oLis.length;i++){
    // 给每个li标签添加下标属性
    oLis[i].index = i
    oLis[i].onmouseover = function(){
        // 将所有带有active类名的li的active类名去掉
        for(var j=0;j<oLis.length;j++){
            oLis[j].className = '';
        }
        // 给当前li标签添加active类名
        this.className = 'active'
        // 获取当前标签的下标，根据下标获取到对应的内容
        var data = arr[this.index]
        // 将获取到的对象数据中的title和content放到下面的active盒子中
        titleBox.innerText = data.title
        contentBox.innerText = data.content
    }
}