一、项目介绍
  • 项目名称：万年历
  • 项目简介：点击实现主要月份切换，并实现备忘录的更新
  • 项目目标：用简洁的代码实现美观且通顺的需求
二、项目逻辑
  • 有一张万年历
  • 用无序列表实现每一个月份的排序
  • 遍历所有的月份，进行active的设置
  • 换月份实现同步换备忘录
三、项目实现

1. style

<style>
        *{margin: 0;list-style: none;padding: 0;}
        #box1{width: 405px;height: 700px;background: #ecfff4;border: 1px solid #a3a3a3;margin: 100px auto;padding-top: 40px;padding-left: 40px;cursor: pointer;}
        #box1 li{width: 100px;height: 100px;background: rgb(171, 211, 180);border: 1px solid black;float: left;margin: 10px;text-align: center;color: rgb(25, 107, 69);}
        ul li:nth-child(10){margin-bottom: 30px;}
        li h2{font-size: 35px;line-height: 60px;}
        li p{font-size: 30px;}
        .box2{float: left;width: 360px;height: 160px;background: rgba(230, 252, 210, 0.623);border: 1px solid rgb(46, 94, 62);margin-left: 2px;padding-left: 20px;padding-top: 20px;box-sizing: border-box;}
        #box1 .active{background: rgb(43, 95, 79);color: rgb(228, 255, 240);border: 1px solid black;}
        .box2 h3{font-size: 26px;color: cadetblue;line-height: 50px;}
        .box2 p{font-size: 24px;color: cadetblue;}
    </style>

2. body

<body>
    <div id="box1">
        <ul>
            <li class="active"><h2>1</h2><p>JAN</p></li>
            <li><h2>2</h2><p>JAN</p></li>
            <li><h2>3</h2><p>JAN</p></li>
            <li><h2>4</h2><p>JAN</p></li>
            <li><h2>5</h2><p>JAN</p></li>
            <li><h2>6</h2><p>JAN</p></li>
            <li><h2>7</h2><p>JAN</p></li>
            <li><h2>8</h2><p>JAN</p></li>
            <li><h2>9</h2><p>JAN</p></li>
            <li><h2>10</h2><p>JAN</p></li>
            <li><h2>11</h2><p>JAN</p></li>
            <li><h2>12</h2><p>JAN</p></li>
        </ul>
        <div class="box2">
            <h3>1月活动</h3>
            <p>'今天我很开心！????'</p>
        </div>
    </div>
</body>

3. js

var arr = ['今天我很开心！????',
            '今天我很快乐！????',
            '今天我很幸福！✌',
            '今天我很难过????',
            '今天我很伤心????',
            '今天我很激动????',
            '今天我很愤怒????',
            '今天我很安静????',
            '今天我很努力！✊',
            '今天也要继续努力????',
            '明年快要到来????',
            '平安顺遂????']

var all = document.querySelectorAll("#box1 li")
var oh = document.querySelector(".box2 h3")
var op = document.querySelector(".box2 p")

for(var i=0;i<all.length;i++){
    all[i].abc = i;
    all[i].onclick = function () {
        for(var j=0;j<all.length;j++){
            all[j].className = '';
        }
        this.className = 'active';
        oh.innerHTML = this.abc + 1 + '月活动';
        op.innerHTML = arr[this.abc];
    }
}