原生js仿博客园日历

2018-07-25 分类：JavaScript 作者：管理员阅读（732）

仿博客园日历 - 先上一张效果图

仿博客园日历

* 该日历用table布局
* 实现了上一月和下一月的点击渲染效果
* 实现了当前日期的高亮
* 实现了显示月份所有日期高亮
*兼容IOS和Android

* 用到了日期格式化方法dateFormat()
* 跟据日期获取星期方法getWeek()
* 获取加减月数后的日期方法getBeAfDateByMonth()
* 根据日期获取日期所在月的总共天数getMaxDayOfDate()

* 难点:
* 本月日期
* 上一月日期
* 下一月日期

全部代码如下：

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿博客园日历</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
</head>
<style>
body,h4{
margin: 0;
padding: 0;
}
body{
position: relative;
}
html,body{
height: 100%;
}
#wrap{
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
text-align: center;
}
#wrap h4{
padding-bottom: 10px;
}
a{
text-decoration: none;
color: red;
}
td,th{
width: 30px;
height: 30px;
box-sizing: border-box;
text-align: center;
}

h4{
text-align: center;
}
#tableBox{
width: 210px;
border: 1px solid #777;
margin: 0 auto;
}
table{
border-collapse: collapse;
}
#tableHead>tbody tr:not(:nth-child(2)) td{
font-size: 14px;
color: #000;
}
#tableHead tbody tr:last-child{
border-top: 1px solid #e2e2e2;
}
#tableConetent>tbody tr td{
font-size: 14px;
}
#tableConetent>tbody tr td:hover{
background-color: #eaeaea;
color: #333;
cursor: pointer;
}
#prev,#next{
cursor: pointer;
}
#prev:hover,#next:hover{
color: red!important;
}
.active{
background:#73d661;
color:#fff!important;
}
</style>
<body>
<div id="wrap">
<h4>仿博客园日历</h4>
<div id="tableBox">
<table id="tableHead">
<tbody>
<tr>
<td id="prev"><</td>
<td colspan="5" align="center" id="details" ></td>
<td id="next">></td>
</tr>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</tbody>
</table>
<table id="tableConetent">
<tbody></tbody>
</table>
</div>
</div>
</body>
<script>
"use strict;"
var prev=document.querySelector('#prev');
var next=document.querySelector('#next');
var details=document.querySelector('#details');
var tbody=document.querySelector('#tableConetent tbody');
var tdStr = '';
for(let i =0;i<6;i++){
tdStr += `<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>`
}
tbody.innerHTML = tdStr;
var aTb=document.querySelectorAll('#tableConetent tbody td');
prev.onclick = function(){calendar(-1)}
next.onclick = function(){calendar(1)}
calendar(0)
function calendar(status){
if(status==0){
details.innerHTML = dateFormat('yyyy年M月');
var curDate=getWeek(dateFormat('yyyy-MM-')+'01');
var n=curDate=='日'?7:curDate=='六'?6:curDate=='五'?5:curDate=='四'?4:curDate=='三'?3:curDate=='二'?2:1;
var arr=[]
//上一月多少天
var prveMonth=getMaxDayOfDate(getBeAfDateByMonth(-1));
//本月多少天
var currMonth=getMaxDayOfDate();
}else if(status==1){
//获取原来的日期
var currYearMonth=details.innerHTML;
//原来的日期转化到格式化日期
var curDate=currYearMonth.replace(/[年月]/g,function(r1){return r1=='年'||'月'?'/':'';})+'01 00:00:00';
var dt=new Date(curDate)
details.innerHTML = getBeAfDateByMonth(1,dt).split('-',2)[0]+'年'+(getBeAfDateByMonth(1,dt).split('-',2)[1]-0)+'月';
var currentDate=getWeek(getBeAfDateByMonth(1,dt));
var n=currentDate=='日'?7:currentDate=='六'?6:currentDate=='五'?5:currentDate=='四'?4:currentDate=='三'?3:currentDate=='二'?2:1;
var arr=[]
//上一月多少天
var prveMonth=getMaxDayOfDate(dateFormat('yyyy-MM-dd',getBeAfDateByMonth(0,curDate)));
//本月多少天
var currMonth=getMaxDayOfDate(dateFormat('yyyy-MM-dd',getBeAfDateByMonth(1,dt)));
}else if(status==-1){
//获取原来的日期
var currYearMonth=details.innerHTML;
//原来的日期转化到格式化日期
var curDate=currYearMonth.replace(/[年月]/g,function(r1){return r1=='年'||'月'?'/':'';})+'01 00:00:00';
var dt=new Date(curDate)
details.innerHTML = getBeAfDateByMonth(-1,dt).split('-',2)[0]+'年'+(getBeAfDateByMonth(-1,dt).split('-',2)[1]-0)+'月';
var currentDate=getWeek(getBeAfDateByMonth(-1,dt));
var n=currentDate=='日'?7:currentDate=='六'?6:currentDate=='五'?5:currentDate=='四'?4:currentDate=='三'?3:currentDate=='二'?2:1;
var arr=[]
//上一月多少天
var prveMonth=getMaxDayOfDate(dateFormat('yyyy-MM-dd',getBeAfDateByMonth(-2,curDate)));
//本月多少天
var currMonth=getMaxDayOfDate(dateFormat('yyyy-MM-dd',getBeAfDateByMonth(-1,dt)));
}
var init=details.innerHTML;
for(var i=prveMonth;i>prveMonth-n;i--){arr.unshift(i)}
for(var j=1;j<currMonth+1;j++){arr.push(j)}
var len=43-arr.length;
for(var k=1;k<len;k++){arr.push(k)}

for(var t=0;t<42;t++){
if(t>=n&&t<=n+currMonth-1){
aTb[t].removeAttribute('class');
if(getDatePart('日')==arr[t]&&dateFormat('yyyy年M月')==init){
aTb[t].className='active';
}else{
aTb[t].style.color='#333';
}
}else{

aTb[t].removeAttribute('style');
aTb[t].style.color='#d2d2d2';
}
aTb[t].innerHTML = arr[t]
}
}
//获取日期加减n月后的日期
function getBeAfDateByMonth(n){
var dt =arguments[1]?new Date(arguments[1]): new Date();
dt.setMonth(dt.getMonth() + n);
return dt.getFullYear()+'-'+(dt.getMonth()+1<10?'0'+(dt.getMonth()+1):(dt.getMonth()+1))+'-'+(dt.getDate()<10?'0'+dt.getDate():dt.getDate())
}
//获取星期
function getWeek(){
var i=arguments[0]?new Date(arguments[0]).getDay():new Date().getDay()
return ['日','一','二','三','四','五','六'][i]
}
//获取日期部分具体信息
function getDatePart(typeName){
var t=arguments[1]?new Date(arguments[1]):new Date();
switch(typeName) {
case '年':
return t.getFullYear();
break;
case '月':
return t.getMonth()+1;
break;
case '日':
return t.getDate();
break;
case '时':
return t.getHours();
break;
case '分':
return t.getMinutes();
break;
case '秒':
return t.getSeconds();
break;
default:
return '';
}
}
//获取日期所在的月份有多少天
function getMaxDayOfDate(){
var dt=arguments[0]?new Date(arguments[0]):new Date()
dt.setMonth(dt.getMonth() + 1)
dt.setDate(1)
dt.setDate(dt.getDate() -1)
return dt.getDate()
}
//日期格式化
function dateFormat(format){
var d=new Date();
var t=arguments[1]?new Date(arguments[1]):d;
var date = {
"M+": t.getMonth() + 1,
"d+": t.getDate(),
"h+": t.getHours(),
"m+": t.getMinutes(),
"s+": t.getSeconds(),
"q+": Math.floor((t.getMonth() + 3) / 3),
"S+": t.getMilliseconds()
};
if (/(y+)/i.test(format)) {
format = format.replace(RegExp.$1, (t.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for (var k in date) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
}
}
return format;
}
</script>
</html>

「三年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(4) 打赏