-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path日历.html
255 lines (231 loc) · 7.37 KB
/
日历.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单日历</title>
<style type="text/css">
* {
padding: 0%;
/*设置内边距*/
margin: 0%;
/*设置外边距*/
}
/*设置日历的背景色*/
html,
body {
background: #f2f2f2;
}
/*设置整个页面的显示样式*/
.calendar {
margin: auto;
width: 382px;
height: 330px;
background: white;
box-shadow: 0px 1px 1px rgba(0, 0, 0, .1);
background: linear-gradient(45deg, #ffffff, #ffe7fb);
box-shadow: 0px 15px 40px #eed9ff;
}
/*标题的显示样式*/
.title {
height: 70px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
position: relative;
text-align: center;
background-color: rgb(161, 74, 241);
}
/*标题中的月份显示样式*/
#calendar-title {
font-size: 25px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
padding: 14px 0 0 0;
}
/*标题中的年份显示样式*/
#calendar-year {
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
}
/*上个月的超链接显示样式*/
#pre {
position: absolute;
top: 0px;
left: 0px;
/*没规定大小时，图片显示 0X0*/
font-size: 40px;
color: #ffffff;
width: 60px;
height: 70px;
text-decoration: none;
}
/*下个月的超链接显示样式*/
#next {
position: absolute;
top: 0px;
right: 0px;
font-size: 40px;
color: #fff;
width: 60px;
height: 70px;
text-decoration: none;
}
.body-list ul {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
width: 100%;
box-sizing: border-box;
}
.body-list ul li {
list-style: none;
display: block;
width: 14.28%;
float: left;
/*规定行高，垂直居中*/
height: 36px;
line-height: 36px;
box-sizing: border-box;
text-align: center;
}
/*类选择器：设置所有class属性为green的标签的样式*/
.green {
color: #33b9fc;
}
/*设置已经过去的日期颜色*/
.lightgrey {
color: #7c7c7c;
}
/*设置将来的日期颜色*/
.darkgrey {
color: #434343;
}
/*日期当天用绿色背景绿色文字加以显示*/
.greenbox {
border: 1px solid #eed1ff;
background: #f6e5ff;
}
.lightgrey ul li {
color: #313131;
}
</style>
</head>
<body>
<div class="calendar">
<div class="title">
<h1 class="green" id="calendar-title" style="color: rgb(251, 255, 0);">Month</h1>
<h2 class="green" id="calendar-year" style="color: rgb(251, 255, 0);">Year</h2>
<a href="" id="pre">
< </a>
<a href="" id="next">
>
</a>
</div>
<div class="body">
<div class="lightgrey body-list">
<!--使用无序列表标签显示星期-->
<ul>
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
</div>
<!--使用无序列表标签显示日期，日期使用JavaScript动态获取，然后使用innerHTML设置<ul>标签之间的HTML-->
<div class="darkgrey body-list">
<ul id="days">
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var month_olypic = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];//正常年份12个月对应的天数
var month_normal = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];//闰年中12个月对应的天数
var month_name = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];//定义要显示的月份数组
//获取以上各个部分的id
var holder = document.getElementById("days");
var prev = document.getElementById("prev");//上个月份的超链接id
var next = document.getElementById("next");//下个月份的超链接id
var ctitle = document.getElementById("calendar-title");
var cyear = document.getElementById("calendar-year");
//获取当天的年月日
var my_date = new Date();
var my_year = my_date.getFullYear();//获取年份
var my_month = my_date.getMonth(); //获取月份，下标从0开始
var my_day = my_date.getDate();//获取当前日期
//根据年月获取当月第一天是周几
function dayStart(month, year) {
var tmpDate = new Date(year, month, 1);
return (tmpDate.getDay());
}
//根据年份判断某月有多少天，主要是区分闰年
function daysMonth(month, year) {
var tmp1 = year % 4;
var tmp2 = year % 100;
var tmp3 = year % 400;
if ((tmp1 == 0 && tmp2 != 0) || (tmp3 == 0)) {
return (month_olypic[month]);//闰年
} else {
return (month_normal[month]);//非闰年
}
}
function refreshDate() {
var str = "";
//计算当月的天数和每月第一天都是周几
var totalDay = daysMonth(my_month, my_year);
var firstDay = dayStart(my_month, my_year);
//添加每个月前面的空白部分，即若某个月的第一天是从周三开始，则前面的周一，周二需要空出来
for (var i = 0; i < firstDay; i++) {
str += "<li>" + "</li>";
}
//从一号开始添加到totalDay（每个月的总天数），并为pre，next和当天添加样式
var myclass;
for (var i = 1; i <= totalDay; i++) {
//如果是已经过去的日期，则用浅灰色显示
if ((my_year < my_date.getFullYear()) || (my_year == my_date.getFullYear() &&
my_month < my_date.getMonth()) || (my_year == my_date.getFullYear() &&
my_month == my_date.getMonth() && i < my_day)) {
myclass = " class='lightgrey'";
}
//如果正好是今天，则用绿色显示
else if (my_year == my_date.getFullYear() && my_month == my_date.getMonth() && i == my_day) {
myclass = "class = 'green greenbox'";
}
//将来的日期用深灰色显示
else {
myclass = "class = 'darkgrey'";
}
str += "<li " + myclass + ">" + i + "</li>";
}
holder.innerHTML = str;//为日期的列表标签设置HTML；
ctitle.innerHTML = month_name[my_month];//设置当前显示的月份
cyear.innerHTML = my_year;//设置当前显示的年份
}
refreshDate();//显示日期，更新界面
//上个月的点击事件
pre.onclick = function (e) {
e.preventDefault();
my_month--;
if (my_month < 0) {
my_year--;
my_month = 11;
}
refreshDate();//更新界面
}
//下个月的点击事件
next.onclick = function (e) {
e.preventDefault();
my_month++;
if (my_month > 11) {
my_month = 0;
my_year++;
}
refreshDate();//更新界面
}
</script>
</body>
</html>