本文實例為大家分享了JavaScript快速實現日歷效果的具體代碼，供大家參考，具體內容如下
效果圖
代碼
|
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } #calendar { background-color: #9900ff; color: #fff; border-radius: 5px; margin: 100px auto; } #title { font-size: 1.4em; padding: 4px 0.55em; } #days th { font-weight: bold; text-align: center; padding: 4px 0.55em; } #calendar td { text-align: center; padding: 4px 20px; } #today { color: #f00; font-weight: bold; } .poin { cursor: pointer; cursor: hand; } </style> <script> window.onload=function(){ var form = document.getElementById('calendar'); // 通過日歷對象去調用自身的init方法 calendar.init(form); } var calendar = { year: null, month: null, //日的數組 dayTable: null, //初始化函數 init(form) { // 1獲取日數組 this.dayTable=form.getElementsByTagName('td'); //2創建日歷,傳入當前時間 this.createCalendar(form,new Date()); var nextMon=form.getElementsByTagName('th')[2]; var preMon=form.getElementsByTagName('th')[0]; preMon.onclick=function(){ calendar.clearCalendar(form) var preDate=new Date(calendar.year,calendar.month-1,1); calendar.createCalendar(form,preDate) } nextMon.onclick=function(){ calendar.clearCalendar(form) var nextDate=new Date(calendar.year,calendar.month+1,1); calendar.createCalendar(form,nextDate) } }, //清除日歷數據 clearCalendar(form){ var tds=form.getElementsByTagName('td'); for (var i = 0; i < tds.length; i++) { tds[i].innerHTML=' '; // 清除今天的樣式 tds[i].id=''; } }, // 3生成日歷 // from table表格 date要創建的日期 createCalendar(form,date){ //獲取此時的年份 this.year=date.getFullYear(); //獲取此時的月份 this.month=date.getMonth(); //年份月份寫入日歷 form.getElementsByTagName('th')[1].innerHTML = this.year+"年"+(this.month+1)+"月"; //獲取本月的天數 var dataNum=this.getDateLen(this.year,this.month); var fristDay = this.getFristDay(calendar.year,calendar.month); // 循環將每一天的天數寫入到日歷中 // 讓i表示日期。 for (var i = 1; i <= dataNum; i++) { this.dayTable[fristDay+i-1].innerHTML=i; var nowDate =new Date(); if(i ==nowDate.getDate() && calendar.month ==nowDate.getMonth()&&calendar.year == nowDate.getFullYear()){ // 將當期元素的id設置為today calendar.dayTable[i+fristDay-1].id = "today"; } } }, // 獲取本月份的天數 getDateLen(year,month){ //獲取下個月的第一天 var nextMonth=new Date(year,month+1,1); // 設置下月第一天的小時-1，也就是上個月最后一天的小時數，隨便減去一個值不要超過24小時 nextMonth.setHours(nextMonth.getHours()-1); //獲取此時下個月的日期,就是上個月最后一天. return nextMonth.getDate(); }, // 獲取本月第一天為星期幾。 getFristDay:function(year,month){ var fristDay=new Date(year,month,1); return fristDay.getDay(); } } </script></head><body> <table id="calendar"> <tr> <!-- 向左箭頭 --> <th class="poin"><<</th> <!-- 年月 --> <th id="title" colspan="5"></th> <!-- 向右箭頭 --> <th class="poin">>></th> </tr> <tr id="days"> <th>日</th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th>六</th> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table></body></html> |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_50821119/article/details/114435766
