简单万年历实现

一、项目介绍

• 项目名称：万年历
• 项目简介：点击实现主要月份切换，并实现备忘录的更新
• 项目目标：用简洁的代码实现美观且通顺的需求

二、项目逻辑

• 有一张万年历
• 用无序列表实现每一个月份的排序
• 遍历所有的月份，进行active的设置
• 换月份实现同步换备忘录

三、项目实现

1. style

2. body

    

        

            
1
JAN
            
2
JAN
            
3
JAN
            
4
JAN
            
5
JAN
            
6
JAN
            
7
JAN
            
8
JAN
            
9
JAN
            
10
JAN
            
11
JAN
            
12
JAN
        
        

            
1月活动
            
'今天我很开心！'
        
    

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