JS写一个日历（一）

原创

已于 2023-08-25 16:17:52 修改 · 置顶 · 338 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

于 2021-08-02 16:34:27 首次发布

本文介绍了如何使用JavaScript和jQuery创建一个简单的日历。首先获取当前的年月和日期，接着确定月初第一天是周几，然后计算本月有多少天，并将这些日期放入数组。根据数组内容在HTML中动态生成日历表格，选中当天日期并添加点击事件。虽然样式简单，但已具备基本的日历功能，后续可以完善CSS和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，直接说说我的思路。我用的是jquery；

1、先获取当前的年月；

var today = new Date();

//年份

var years = today.getFullYear();

//日

var day = today.getDate();

//月份。由于月份默认是从0开始的，所以这里加了1

var month = today.getMonth()+1;

2、获得本月的第一天是周几；

//月初第一天是周几

var firstWeek = today.getDay(today.setDate(1));

3、获取本月有几天。

//本月多少天 var days = new Date(years,month,0).getDate();

4、循环遍历本月的天数放到数组。

由于每月的第一天是周几不固定。所以往数组塞值的时候分成了两种情况：一种是本月的第一天是周日，这种情况顺序往数组插值就可以了。如果不是周日，则要判断第一天是周几，第一天之前的日期用0代替。

if( firstWeek != 0 ){
    //每月第一天不是周日。就在数组中用0代替。在html代码中处理下。
    for( let j = 0 ; j < firstWeek ; j ++){
        weekArr.push(0);
    }
}
for( let i = 1 ; i <days+1 ; i ++ ){
    weekArr.push(i);
    if( weekArr.length === 7 ){
        weekAll.push(weekArr);
        weekArr = new Array();
    }
}
//上面的for循环，由于最后几天有可能不满足( weekArr.length === 7)的条件，导致会丢失最后的几天。所以要用下面一行再次往weekAll数组中添加一次。但是也可能会出现重