本文實例為大家分享了js實現日歷掛件的具體代碼，供大家參考，具體內容如下
Css code
|
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
|
/************************* * 日歷樣式對應表 * #date 日歷塊 * table 表格 * th 頭部 * td 身體 * a.now 本月 * a.non-arrival 其他月 * a.day 今天 * a.href 鏈接 * #date_diglogs 記住對話框 *************************/ #date { width: 220px; padding-bottom: 5px; box-shadow: 0 1px 3px #ccc; border: 1px solid #EDEDED;} #date table { width: inherit; user-select: none; font-size: 12px; border-collapse: collapse; border-spacing: 0px;} #date table tr th { background-color: #f8f8f8; color: #5e5f63;} #date table tr:nth-of-type(2) th { font-weight: 300;} #date table tr td { text-align: center; font-family: "Comic Sans MS"; padding: 2px 0;} #date table tr td a { text-decoration: none;} #date table tr td a.now { color: #757575;} #date table tr td a.day { background: mediumblue; text-decoration: underline; color: #fff;} #date table tr td a.href { border: 1px solid #ccc; transition: all 1s linear;} #date table tr td a.href:hover { border: 1px dotted #5E5F63; background: gold;} #date table tr td a.non-arrival { color: #ccc;} .date_diglogs { font-size: 10px; background: #fff; padding: 2px 5px; border-radius: 3px; box-shadow: 0 1px 3px #ccc; border: 1px solid #EDEDED; color: #757575;} |
Js code
|
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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
|
/* 2021/2/26 * 功能: 日歷掛件 * 清源妙善 */ function BlogDate(nowDate) { /* 可變數據 */ this.year = nowDate.getFullYear(); // 獲取年份 this.month = nowDate.getMonth(); // 獲取月份 this.day = nowDate.getDate(); // 獲取今天是幾號 this.week = new Date(this.year, this.month, 1).getDay(); // 獲取每月前面的空余天數 this.days = new Date(this.year, this.month + 1, -1).getDate() + 1; // 獲取總共有幾天 this.last_month = new Date(this.year, this.month, -1).getDate() + 1; // 保存上個月的天數 /* 不變數據 */ this.now_year = nowDate.getFullYear(); // 保存今年的年份 this.now_month = nowDate.getMonth(); // 保存今年的月份} BlogDate.prototype.createDate = function(name) { // 獲取塊與創建表格 let date_div = document.getElementById('date'); let date_table = document.createElement('table'); date_div.appendChild(date_table); // 創建所有的 tr 標簽 let date_all_tr = new Array(); for (let n = 0; n < 8; n++) { date_all_tr[n] = document.createElement('tr'); date_table.appendChild(date_all_tr[n]); } // 創建頭部th標簽 let date_head_th = new Array(); for (let n = 0; n < 3; n++) { date_head_th[n] = document.createElement('th'); date_all_tr[0].appendChild(date_head_th[n]); } // 設置特殊元素屬性 date_head_th[0].setAttribute('id', 'prev'); date_head_th[1].setAttribute('colspan', '5'); date_head_th[1].setAttribute('title', `${name}`); date_head_th[2].setAttribute('id', 'next'); // 創建星期 th 標簽 let date_week_th = new Array(); for (let n = 0; n < 7; n++) { date_week_th[n] = document.createElement('th'); date_all_tr[1].appendChild(date_week_th[n]); } // 創建身體 td, a 標簽數組 let date_body_td = new Array(); let date_body_td_a = new Array(); // 創建身體 td, a 標簽實體 for (let n = 2, i = 0; n < 8; n++, i++) { date_body_td[i] = []; date_body_td_a[i] = []; for (let m = 0; m < 7; m++) { date_body_td[i][m] = document.createElement('td'); date_body_td_a[i][m] = document.createElement('a'); date_body_td[i][m].appendChild(date_body_td_a[i][m]); date_all_tr[n].append(date_body_td[i][m]); } }} BlogDate.prototype.setBlogDate = function(newDate) { /* 更新數據 */ this.year = newDate.getFullYear(); // 獲取年份 this.month = newDate.getMonth(); // 獲取月份 this.day = newDate.getDate(); // 獲取今天是幾號 this.week = new Date(this.year, this.month, 1).getDay(); // 獲取每月前面的空余天數 this.days = new Date(this.year, this.month + 1, -1).getDate() + 1; // 獲取總共有幾天 this.last_month = new Date(this.year, this.month, -1).getDate() + 1; // 獲取上個月的天數} BlogDate.prototype.updateTime = function(blogs_date) { // 獲取日歷對象 let date_div = document.getElementById('date'); let date_table = date_div.getElementsByTagName('table')[0]; // 創建日歷頭部 tr, th let date_head_tr = date_table.getElementsByTagName('tr')[0]; let date_head_th = date_head_tr.getElementsByTagName('th'); // 創建頭部數據 let date_head_arr = [ '<', `${this.year} 年 ${this.month + 1} 月`, '>' ]; // 更新頭部數據 for (let n = 0; n < date_head_th.length; n++) { date_head_th[n].textContent = date_head_arr[n]; } // 創建星期部分 tr, th let date_week_tr = date_table.getElementsByTagName('tr')[1]; let date_week_th = date_week_tr.getElementsByTagName('th'); // 創建星期數據 let date_week_arr = [ '日', '一', '二', '三', '四', '五', '六' ]; // 更新星期數據 for (let n = 0; n < date_week_th.length; n++) { date_week_th[n].textContent = date_week_arr[n]; } // 獲取身體 td 的 a 標簽 let date_body_td_a = date_table.getElementsByTagName('a'); // 設置其他月份的天數 ( 前 ) for (let n = this.week - 1, last_month = this.last_month; n >= 0; n--, last_month--) { date_body_td_a[n].textContent = last_month; date_body_td_a[n].setAttribute('class', 'non-arrival'); } // 設置現在月份的天數 ( 現 ) for (let n = this.week, i = 1; i <= this.days; n++, i++) { date_body_td_a[n].textContent = i; // 如果今年今月今日, 設置 day 樣式, 其余 now 樣式 if ((i == this.day) && (new Date(this.year, this.month, 1).getMonth() == this.now_month) && (new Date(this.year, this.month, 1).getFullYear() == this.now_year)) { date_body_td_a[n].setAttribute('class', 'day'); } else { date_body_td_a[n].setAttribute('class', 'now'); } } // 設置其他月份的天數 ( 后 ) for (let n = this.week + this.days, i = 1; n < date_body_td_a.length; n++, i++) { date_body_td_a[n].textContent = i; date_body_td_a[n].setAttribute('class', 'non-arrival'); } // 如果鏈接部分日期數據相同, 設置對應樣式 for (let n = 0; n < date_body_td_a.length; n++) { for (let m = 0; m < blogs_date.href_num; m++) { if ((this.year == blogs_date.href_year[m]) && (this.month + 1 == blogs_date.href_month[m]) && (n == blogs_date.href_day[m])) { date_body_td_a[n].setAttribute('href', blogs_date.href_url[m]); date_body_td_a[n].classList.add('href'); date_body_td_a[n].setAttribute('target', '_blank'); } else { // 如果不是則判斷是否存在多余屬性 if (Boolean(date_body_td_a[n].getAttribute('target')) && Boolean(date_body_td_a[n].getAttribute('href')) && (date_body_td_a[n].getAttribute('class') == 'now' || date_body_td_a[n].getAttribute('class') == 'non-arrival')) { date_body_td_a[n].removeAttribute('href'); date_body_td_a[n].removeAttribute('target'); } } } }} function initDate( // 默認日歷參數表 blogs_date = { blogs_name: '我的日歷', href_year: [2021], href_month: [2], href_day: [26], href_url: ['http://www.4399.com/'], href_prompt: ['這是我編寫的日歷掛件'], href_dialog: false, href_num: undefined }) { // 參數長度是否相等 if ((blogs_date.href_day.length != blogs_date.href_month.length) || (blogs_date.href_month.length != blogs_date.href_year.length) || (blogs_date.href_year.length != blogs_date.href_url.length)) { console.info('日歷參數長度不等'); return false; } // 參數長度相同, 設置對應長度 else { blogs_date.href_num = blogs_date.href_day.length; } // 創建日歷數據 let timeDate = new Date(); let blogDate = new BlogDate(timeDate); // 創建日歷實體 blogDate.createDate(blogs_date.blogs_name); blogDate.updateTime(blogs_date); // 添加 prev 事件 document.getElementById('prev').onclick = function() { timeDate.setMonth(timeDate.getMonth() - 1); blogDate.setBlogDate(timeDate); blogDate.updateTime(blogs_date); } // 添加 next 事件 document.getElementById('next').onclick = function() { timeDate.setMonth(timeDate.getMonth() + 1); blogDate.setBlogDate(timeDate); blogDate.updateTime(blogs_date); } openDialogs(blogs_date); showBlogsData(blogs_date, timeDate);} function showBlogsData(blogs_date, now) { for (let k in blogs_date) { console.info(`[${k}] : ${blogs_date[k]}`); } console.info(`BlogsDate Ok ${now}`);} function openDialogs(blogs_date) { // 是否開啟對話框 switch (blogs_date.href_dialog) { case true: let hrefId = document.getElementsByClassName('href'); for (let n = 0; n < hrefId.length; n++) { hrefId[n].onmouseover = function(e) { if (this.getAttribute('class') != 'now' && this.getAttribute('class') != 'non-arrival') { var e = e || window.event; let x = e.clientX; let y = e.clientY; let prompt = blogs_date.href_prompt[n]; let dialogs = document.createElement('div'); dialogs.classList.add('date_diglogs'); dialogs.textContent = prompt; dialogs.style.cssText = `position: absolute; left: ${x-20}px; top: ${y+20}px`; document.body.appendChild(dialogs); } } hrefId[n].onmouseout = function() { if (this.getAttribute('class') != 'now' && this.getAttribute('class') != 'non-arrival') { let diglogs = document.getElementsByClassName('date_diglogs')[0]; document.body.removeChild(diglogs); } } } break; case false: break; }} |
Html code
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>date html</title> <link rel="stylesheet" href="date.css" media="screen"> </head> <body> <h3>Hello</h3> <div id="date"></div> <script src="date.js"></script> <script> initDate(blogs_date = { blogs_name : '我的日歷', href_year : [2021, 2021], href_month : [2, 2], href_day : [27, 3], href_url : ['http://www.4399.com/', 'http://www.baidu.com/'], href_prompt: ['今天要出門看親人', '今天要早睡'], href_dialog: true }); </script> </body></html> |
效果
參考鏈接：jquery實現日歷效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_35068659/article/details/114126238
