本文实例为大家分享了JS实现简易日历效果的具体代码，供大家参考，具体内容如下
css
|
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
|
* { margin: 0; padding: 0; list-style: none; } #box { width: 280px; height: 360px; margin: 50px auto; background-color: black; color: aliceblue; line-height: 40px; } #header { height: 40px; color: aliceblue; line-height: 40px; } #header span { float: left; text-align: center; margin-top: 10px; line-height: 40px; } #prev, #next { width: 20%; line-height: 40px; cursor: pointer; } #current { width: 60%; line-height: 40px; } #week li { width: 40px; text-align: center; float: left; line-height: 40px; } #content li { width: 40px; text-align: center; float: left; line-height: 40px;} |
html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<div id="box"> <div id="header"> <span id="prev">上</span> <span id="current"></span> <span id="next">下</span> </div> <ul id="week"> <li>日</li> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> </ul> <ul id="content"> <!-- <li>31</li> <li>1</li> <li>2</li> --> </ul></div>``` |
js
|
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
|
var current = document.querySelector('#current');//月份name var prev = document.querySelector('#prev'); // 上个月 var next = document.querySelector('#next'); // 下个月 var content = document.querySelector('#content'); // 日期内容 // 上个月要显示的天数 // 求出本月第一天是星期几 // 求出上个月最大的天数 把日期设为0 function getPrevDays(date) { var date = new Date(date); // 把日期设为第一天，为了获取第一天是星期几 date.setDate(1); var week = date.getDay(); // 把日期设为0，为了得到上个月的最后一天 date.setDate(0); var maxDay = date.getDate(); var list = []; // 遍历红色日期的范围 push进数组 for (var i = maxDay - week + 1; i <= maxDay; i++) { list.push(i); } return list; } // 求本月的天数 // 月份推到下个月 // 日期设为0 function getNowDays(date) { var date = new Date(date); date.setMonth(date.getMonth() + 1); date.setDate(0); var maxDay = date.getDate(); // console.log(maxDay) var list = []; // for (var i = 1; i <= maxDay; i++) { list.push(i) } return list; } // 下个月要显示的天数 function getNextDays(prevDays, nowDays) { var list = []; // 一页日历42天，42 - 上月天数 - 这个月天数 = 最后显示剩余的下个月天数 for (var i = 1; i <= 42 - prevDays - nowDays; i++) { list.push(i) } return list } var x = 1; // 封装输出日期内容 // x记录点击月份 根据月份 上面数组自动获取当月要显示的时间 function output(x) { arr1 = getPrevDays('2021-' + x); arr2 = getNowDays('2021-' + x); arr3 = getNextDays(arr1.length, arr2.length); // console.log(arr2); var res = ''; for (var i = 0; i < arr1.length; i++) { res += '<li style="color:red;">'; res += arr1[i]; res += '</li>'; } for (var i = 0; i < arr2.length; i++) { res += '<li>'; res += arr2[i]; res += '</li>'; } for (var i = 0; i < arr3.length; i++) { res += '<li style="color:red;">'; res += arr3[i]; res += '</li>'; } // 三个数组输出结果拼接起来 输出 return content.innerHTML = res; } // 输出月份显示 var date = new Date(); current.innerHTML = showMonth(new Date()); // 月份 function showMonth(date) { var date = new Date(date); date.setMonth(date.getMonth()); var mon = date.getMonth(); // var year = date.getFullyear(); return (mon + 1) + '月'; } output(x); // 下个月 next.onclick = function () { x++; // console.log(x); if (x > 12) { x = 1; output(x); } else { current.innerHTML = showMonth('2021-' + x); output(x); } } // 上个月 prev.onclick = function () { x--; console.log(x); if (x < 1) { x = 12; current.innerHTML = showMonth('2021-' + x); output(x); } else { current.innerHTML = showMonth('2021-' + x); output(x); } } |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/hs1219462412/article/details/113032805
