练手：写一个JS日历

马黑黑

今日

马黑黑

只是个练手小作品，全部代码如下：

1. <style>
   
2. #mydiv {
   
3.         margin: 50px auto;
   
4.         padding: 6px;
   
5.         width: fit-content;
   
6.         border: 4px solid rgba(0,0,0,.15);
   
7.         border-radius: 6px;
   
8.         background: rgba(100,100,100,.6);
   
9.         box-shadow: 4px 4px 16px rgba(0,0,0,.25);
   
10. }
    
11. #rlTop {
    
12.         display: flex;
    
13.         gap: 6px;
    
14.         background: #ccc;
    
15.         padding: 10px;
    
16.         border-radius: 10px 10px 0 0;
    
17. }
    
18. #today {
    
19.         text-align: right;
    
20.         cursor: pointer;
    
21.         user-select: none;
    
22. }
    
23. #rili {
    
24.         width: 280px;
    
25.         display: flex;
    
26.         flex-direction: row;
    
27.         flex-wrap: wrap;
    
28.         background: #eee;
    
29.         border-radius: 0 0 10px 10px;
    
30. }
    
31. .tbox {
    
32.         width: 40px;
    
33.         height: 40px;
    
34.         text-align: center;
    
35.         font: normal 16px/40px sans-serif;
    
36. }
    
37. 
    
38. </style>
    
39. 
    
40. <div id="mydiv">
    
41.         <div id="rlTop">
    
42.                 <select id="sYear"></select>
    
43.                 <select id="sMonth"></select>
    
44.                 <span id="today" title="今日日历">今日</span>
    
45.         </div>
    
46.         <div id="rili"></div>
    
47. </div>
    
48. 
    
49. <script>
    
50. let thisYear = new Date().getFullYear();
    
51. let thisMonth = new Date().getMonth();
    
52. let thisDay = new Date().getDate();
    
53. let m1stDay = (y,m) => new Date(y, m).getDay();
    
54. let mAllDays = (y,m) => new Date(y, m + 1, 0).getDate();
    
55. 
    
56. let calendar = (year,month) => {
    
57.         let ar = '日一二三四五六'.split('').map(c => `<div class="tbox">${c}</div>`);
    
58.         let output = ar.join('');
    
59.         let d = new Date(year,month);
    
60.         let y = d.getFullYear(), m = d.getMonth();
    
61.         let alldays = mAllDays(y,m);
    
62.         let firstday = m1stDay(y,m);
    
63.         Array.from({length: alldays + firstday}).forEach((item,key) => {
    
64.                 let idx = key < firstday ? '' : (key - firstday + 1);
    
65.                 if(idx == thisDay && month == thisMonth && year == thisYear)
    
66.                         idx = `<span style="color:red">${idx}</span>`;
    
67.                 output += `<div class="tbox">${idx}</div>`;
    
68.         });
    
69.         rili.innerHTML = output;
    
70. };
    
71. 
    
72. let mkYear = () => {
    
73.         let ar = [...new Array(10).keys()].map(item => item + 2018);
    
74.         ar.forEach((y,k) => {
    
75.                 let selected = y == new Date().getFullYear() ? 'selected' : '';
    
76.                 sYear.innerHTML += `<option ${selected} value="${y}">${y}年</option>`;
    
77.         });
    
78. };
    
79. 
    
80. let mkMonth = () => {
    
81.         Array.from({length: 12}).forEach((m,k) => {
    
82.                 let selected = k === new Date().getMonth() ? 'selected' : '';
    
83.                 sMonth.innerHTML += `<option ${selected} value="${k}">${k + 1}月</option>`;
    
84.         });
    
85. };
    
86. 
    
87. sYear.onchange = sMonth.onchange = () => calendar(sYear.value,sMonth.value);
    
88. 
    
89. today.onclick = () => {
    
90.         sYear.value = thisYear;
    
91.         sMonth.value = thisMonth;
    
92.         calendar(thisYear,thisMonth);
    
93. };
    
94. 
    
95. calendar(thisYear,thisMonth);
    
96. mkYear();
    
97. mkMonth();
    
98. 
    
99. </script>

复制代码

红影

这个随便输入年份和月，就能知道那一天是周几了，厉害

红影

刚才没改月份，输入2024年，发现是1号是周日，然后才发现忘了改月份，1月的1号是周一的

红影

这个日历好，自己人做的呢，比别的都珍贵

梦油

这可太实用了。

马黑黑

醉美水芙蓉 发表于 2023-12-29 17:18
老师这个日历很牛！

没啥功能，且当练习

马黑黑

红影 发表于 2023-12-29 12:47
这个随便输入年份和月，就能知道那一天是周几了，厉害

这是日历最基本的功能。里面的算法仰赖JS的date对象，可以很容易算出一个月头一天星期几、每个月的天数。我不记得我用过的什么语言，计算二月份的天数要自己设计算法，JS可以不用。

马黑黑

梦油 发表于 2023-12-29 17:17
这可太实用了。

现在日历多了去，且功能都丰富、完备，这个知识练习而已

侃大山

很实用，外观也好

马黑黑

侃大山 发表于 2023-12-29 18:27
很实用，外观也好

感谢支持

红影

马黑黑 发表于 2023-12-29 17:24
这是日历最基本的功能。里面的算法仰赖JS的date对象，可以很容易算出一个月头一天星期几、每个月的天数。 ...

JS的这个功能太棒了

马黑黑

红影 发表于 2023-12-29 19:34
JS的这个功能太棒了

它封装的 date 对象却是挺好，然后使用者只要掌握一些原理和算法，就不必太费劲就可以实现很多功能。

红影

马黑黑 发表于 2023-12-29 22:31
它封装的 date 对象却是挺好，然后使用者只要掌握一些原理和算法，就不必太费劲就可以实现很多功能。

但是能弄得这么好看也不容易呢

马黑黑

红影 发表于 2023-12-29 23:14
但是能弄得这么好看也不容易呢

那是CSS的功劳

红影

马黑黑 发表于 2023-12-30 12:59
那是CSS的功劳

更是黑黑的功劳

梦油

马黑黑 发表于 2023-12-29 17:24
现在日历多了去，且功能都丰富、完备，这个知识练习而已

看着你熟练的代码技巧真是很羡慕。

小辣椒

高手的，黑科技就是这样的，样样都可以信手拈来

马黑黑

小辣椒 发表于 2023-12-30 15:11
高手的，黑科技就是这样的，样样都可以信手拈来