本文實例為大家分享了js實現(xiàn)日歷掛件的具體代碼，供大家參考，具體內(nèi)容如下
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
|
/************************* * 日歷樣式對應(yīng)表 * #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) { /* 可變數(shù)據(jù) */ this.year = nowDate.getFullYear(); // 獲取年份 this.month = nowDate.getMonth(); // 獲取月份 this.day = nowDate.getDate(); // 獲取今天是幾號 this.week = new Date(this.year, this.month, 1).getDay(); // 獲取每月前面的空余天數(shù) this.days = new Date(this.year, this.month + 1, -1).getDate() + 1; // 獲取總共有幾天 this.last_month = new Date(this.year, this.month, -1).getDate() + 1; // 保存上個月的天數(shù) /* 不變數(shù)據(jù) */ this.now_year = nowDate.getFullYear(); // 保存今年的年份 this.now_month = nowDate.getMonth(); // 保存今年的月份} BlogDate.prototype.createDate = function(name) { // 獲取塊與創(chuàng)建表格 let date_div = document.getElementById('date'); let date_table = document.createElement('table'); date_div.appendChild(date_table); // 創(chuàng)建所有的 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]); } // 創(chuàng)建頭部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]); } // 設(shè)置特殊元素屬性 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'); // 創(chuàng)建星期 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]); } // 創(chuàng)建身體 td, a 標簽數(shù)組 let date_body_td = new Array(); let date_body_td_a = new Array(); // 創(chuàng)建身體 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) { /* 更新數(shù)據(jù) */ this.year = newDate.getFullYear(); // 獲取年份 this.month = newDate.getMonth(); // 獲取月份 this.day = newDate.getDate(); // 獲取今天是幾號 this.week = new Date(this.year, this.month, 1).getDay(); // 獲取每月前面的空余天數(shù) this.days = new Date(this.year, this.month + 1, -1).getDate() + 1; // 獲取總共有幾天 this.last_month = new Date(this.year, this.month, -1).getDate() + 1; // 獲取上個月的天數(shù)} BlogDate.prototype.updateTime = function(blogs_date) { // 獲取日歷對象 let date_div = document.getElementById('date'); let date_table = date_div.getElementsByTagName('table')[0]; // 創(chuàng)建日歷頭部 tr, th let date_head_tr = date_table.getElementsByTagName('tr')[0]; let date_head_th = date_head_tr.getElementsByTagName('th'); // 創(chuàng)建頭部數(shù)據(jù) let date_head_arr = [ '<', `${this.year} 年 ${this.month + 1} 月`, '>' ]; // 更新頭部數(shù)據(jù) for (let n = 0; n < date_head_th.length; n++) { date_head_th[n].textContent = date_head_arr[n]; } // 創(chuàng)建星期部分 tr, th let date_week_tr = date_table.getElementsByTagName('tr')[1]; let date_week_th = date_week_tr.getElementsByTagName('th'); // 創(chuàng)建星期數(shù)據(jù) let date_week_arr = [ '日', '一', '二', '三', '四', '五', '六' ]; // 更新星期數(shù)據(jù) 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'); // 設(shè)置其他月份的天數(shù) ( 前 ) 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'); } // 設(shè)置現(xiàn)在月份的天數(shù) ( 現(xiàn) ) for (let n = this.week, i = 1; i <= this.days; n++, i++) { date_body_td_a[n].textContent = i; // 如果今年今月今日, 設(shè)置 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'); } } // 設(shè)置其他月份的天數(shù) ( 后 ) 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'); } // 如果鏈接部分日期數(shù)據(jù)相同, 設(shè)置對應(yīng)樣式 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( // 默認日歷參數(shù)表 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 }) { // 參數(shù)長度是否相等 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('日歷參數(shù)長度不等'); return false; } // 參數(shù)長度相同, 設(shè)置對應(yīng)長度 else { blogs_date.href_num = blogs_date.href_day.length; } // 創(chuàng)建日歷數(shù)據(jù) let timeDate = new Date(); let blogDate = new BlogDate(timeDate); // 創(chuàng)建日歷實體 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實現(xiàn)日歷效果
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/qq_35068659/article/details/114126238
