js實作日歷簡單演算法-有解無憂

 1 /**
 2  * 初始化當天的日歷資料 (沒有引數默認當天)
 3  * @method
 4  * @param {Date} date
 5  * @param {Number} line 日歷中顯示幾行
 6  * @returns [[],[]]
 7  */
 8 function initMonthCalendar(dates, line = 6) {
 9   var date = new Date(dates);                          // 初始時間格式
10   var y = date.getFullYear();
11   var m = date.getMonth();
12   var days = new Date(y, m + 1, 0).getDate();          // 獲取這個月共有多少天
13   var firstDayWeek = new Date(y, m, 1).getDay();       // 月份第一天星期幾
14 
15 
16   var arr = [];     // 存盤日歷格式的陣列
17   var n = [];       // 日歷格式中的一行
18   var d = 1;        // 日歷格式中的天數
19 
20   // 先根據這個月第一天排星期幾
21   // 把上個月剩下幾天留在這個月的'奸細'放在最前頭
22   for(let i = 0; i < firstDayWeek; i++) {
23     // new Date(2020, 8, 0)   --> 9月沒有0號 === 8月3127     n.unshift(getDate(y, m, 0 - i).getDate());
28   }
29 
30   // 開啟回圈
31   // 一星期占一行，一行一個外回圈
32   // 這里我默認想要6行
33   for (let j = 0; j < line; j++) {
34     // 一天占一個格子，最多一星期7個格子
35     // 這里我想要7個格子
36     for (let i = 0; i < 7; i++) {
39       if(d > days) {
40         // 這個月都放完了，該放什么？
41         // new Date(2020, 8, 31)  --> 9月沒有31 === 10月1
　　　　　　 n.push(new Date(y, m, d++).getDate());
44       } else {
45         // 放置這個月的天數
　　　　　　 n.push(d++);
48       }51 
52       if (n.length == 7) break;    // 放了7個格子該結束了
53     }
54 
55     arr.push(n);
56     n = [];           // 這一行放完了，清空ba
57   }
58 
59 
60   return arr;
61 }

使用：

 1 var calendar= initMonthCalendar('2020-09-19');
 2 
 3 console.log(calendar);
 4 
 5 // [
 6 //     [30, 31, 1, 2, 3, 4, 5]
 7 //     [6, 7, 8, 9, 10, 11, 12]
 8 //     [13, 14, 15, 16, 17, 18, 19]
 9 //     [20, 21, 22, 23, 24, 25, 26]
10 //     [27, 28, 29, 30, 1, 2, 3]
11 //     [4, 5, 6, 7, 8, 9, 10]
12 // ]

獲取這一年的日歷：

var arr = [];
var y = new Date().getFullYear();

for (let i = 0; i < 12; i++) {
  const d = '' + y + '-0' + (i + 1) + '-01';

  arr.push(initMonthCalendar(d))
}   

console.log(arr)

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/84213.html

標籤：JavaScript

上一篇：WEB前端第四十六課——jQuery框架（四）關系節點

下一篇：css基礎-定位+網頁布局案例