本文实例讲述了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
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
>
<meta name=
"apple-mobile-web-app-capable"
content=
"yes"
>
<meta name=
"apple-mobile-web-app-status-bar-style"
content=
"black"
>
<meta name =
"format-detection"
content =
"telephone=no"
>
<title>移动端日历</title>
<style type=
"text/css"
>
table{
width: 100%;
border-collapse: collapse;
}
td {
padding: 0;
margin: 0;
vertical-align: middle;
text-align: center;
font-size: .7rem;
height: 1.5rem;
}
.none{
display: none;
}
</style>
</head>
<body>
<div class=
"calendar"
>
<table class=
"calendar_day"
>
<tr>
<td>星期日</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
</tr>
</table>
<table class=
"calendar_date"
>
<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>
</div>
<script type=
"text/javascript"
>
var
date =
new
Date();
calendar(date,{lastandnext:
true
})
function
calendar (setDate,options){
if
(!options) {
options = {};
}
options.lastandnext = options.lastandnext ||
false
;
// 星期几部分
var
calendar_days = document.getElementsByClassName(
'calendar_day'
)[0];
var
days = calendar_days.getElementsByTagName(
'td'
);
var
date =
new
Date(setDate);
var
y = date.getFullYear();
var
m = date.getMonth();
var
d = date.getDate();
// 本月
// 该月的第一天是星期几
var
firstDay =
new
Date(y,m,1).getDay();
// console.log(firstDay);
// 该月一共多少天
var
lastData =
new
Date(y,m+1,0).getDate();
// console.log(lastData)
// 该月的最后一天是星期几
var
lastDay =
new
Date(y,m+1,0).getDay();
// console.log(firstDay)
var
calendar_date = document.getElementsByClassName(
'calendar_date'
)[0];
var
tds = calendar_date.getElementsByTagName(
'td'
);
// console.log(tds)
var
ed = firstDay;
for
(
var
i = firstDay; i < lastData+firstDay; i++) {
// console.log(i-firstDay+1)
tds[i].innerHTML= i-(firstDay)+1;
}
if
(options.lastandnext){
// // 上月
var
lastMonthData =
new
Date(y,m,0).getDate();
for
(
var
i = firstDay-1; i >= 0; i--){
tds[i].innerHTML= lastMonthData-(firstDay-i-1);
}
// 下月
var
k = 0;
for
(
var
i = lastData+firstDay; i < tds.length; i++){
k++;
tds[i].innerHTML= k;
}
}
}
</script>
<!-- 适配 -->
<script type=
"text/javascript"
>
;(
function
(win, doc){
function
change(){
doc.documentElement.style.fontSize=20*doc.documentElement.clientWidth/360+
'px'
;
}
change();
win.addEventListener(
'resize'
, change,
false
);
})(window, document);
</script>
</body>
</html>
|
PS：这里再为大家分享几款本站的在线日期工具供大家参考：
在线万年历日历：
http://tools.jb51.net/bianmin/wannianli
网页万年历日历：
http://tools.jb51.net/bianmin/webwannianli
在线万年历黄历flash版：
http://tools.jb51.net/bianmin/flashwnl
2870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
