1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="warp">
    <div class="prev">上一月</div>
    <div class="now"><a href="###">返回当前</a></div>
    <div class="next">下一月</div>
    <div class="year">年份</div>
    <div class="mot">月份</div>
    <div class="title">
        <span>日</span>
        <span>一</span>
        <span>二</span>
        <span>三</span>
        <span>四</span>
        <span>五</span>
        <span>六</span>
    </div>
    <div class="main">
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    
上一月
    
返回当前
    
下一月
    
年份
    
月份

    

        日
        一
        二
        三
        四
        五
        六

    

    


    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
let oDate = new Date; //转换成全局变量
add(); //当页面第一次加载时进行渲染
function add() {
    //let oDate = new Date;
    let oYear = oDate.getFullYear(); //获取年份
    let oMon = oDate.getMonth(); //获取月份
    let oDay = oDate.getDate(); //获取当天是第几天
    let monArr = new Array("一月", "二", "三", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"); //月份改成字符串
    //每个月的第一天时周几
    // console.log(new Date(oYear, oMon, 1).getDate());
    let zhou = new Date(oYear, oMon, 1).getDay();
    //获取每个月的天数
    // console.log(new Date(oYear, oMon+1, -1).getDate()+1);
    let days = new Date(oYear, oMon + 1, -1).getDate() + 1;
    document.querySelector('.year').innerHTML = oYear; //获取年份
    document.querySelector('.mot').innerHTML = monArr[oMon]; //获取月份
    let html = '';
    //设置周
    for (let i = 0; i < zhou; i++) {
        html += '<li></li>';
    }
    //设置li
    for (let i = 1; i <= days; i++) {
        if (i == oDay) {
            html += '<li class="active">' + i + '</li>';
        } else {
            html += '<li class="hover">' + i + '</li>';
        }
    }
    document.querySelector('.main').innerHTML = html;
}
document.querySelector('.prev').addEventListener('click', function() {
    oDate.setMonth(oDate.getMonth() - 1);
    add();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX