-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
158 lines (146 loc) · 5.16 KB
/
index.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-Hant-TW" lang="zh-Hant-TW">
<head>
<style>
.styledButton {
border: 0;
line-height: 2.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(220, 0, 0, 1);
background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
.styledButton:hover {
background-color: rgba(255, 0, 0, 1);
}
.styledButton:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.styleTopic {
color: rgba(153,153,255,1);
font-size: xx-large;
font-weight: bold;
}
.styleText {
color: rgba(153, 153, 255, 1);
font-size: medium;
}
</style>
<script type="text/javascript">
var year = -1;
var month = -1;
var day = -1;
var answer = -1;
var leapYear = 0;
function inquire() {
//將各變數設為-1來debug
year = -1;
month = -1;
day = -1;
//取得輸入
year = Number(document.getElementById("inputYear").value);
month = Number(document.getElementById("inputMonth").value);
day = Number(document.getElementById("inputDay").value);
//驗證使用者輸入的是否合理
if ((year <= 1582) || !Number.isInteger(year)) {
document.getElementById("result").innerHTML = '輸入年份錯誤'
}
else if (!Number.isInteger(month) || (month < 1) || (month > 12)) {
document.getElementById("result").innerHTML = '輸入月份錯誤'
}
else {
if (!Number.isInteger(day) || (day > dayOfMonth[month]) || (day < 1)) {
document.getElementById("result").innerHTML = '輸入日期錯誤'
}
else if (!isLeapYear(year) && month == 2 && day > 28){
document.getElementById("result").innerHTML = '輸入日期錯誤'
}
else {
// 已完成驗證
// 找出當年是否為閏年
if (isLeapYear(year) && month >= 3){
leapYear = 1;
}
else {
leapYear = 0;
}
// 要減一年才會是經過的年份
year = year - 1;
// 開始運算
answer = (year + Math.floor(year / 4) + Math.floor(year / 400) - Math.floor(year / 100) + passedDay[month] + day + leapYear) % 7;
document.getElementById("result").innerHTML = '您查詢的日期為星期' + numberToChinese[answer]
}
}
}
//閏年判斷
function isLeapYear(y) {
if (y % 400 == 0){
return true;
}
else if (y % 100 == 0){
return false;
}
else if (y % 4 == 0){
return true;
}
else {
return false;
}
}
//把結果轉為中文
const numberToChinese = {
'0' : '日',
'1' : '一',
'2' : '二',
'3' : '三',
'4' : '四',
'5' : '五',
'6' : '六',
}
// 運算各個月份經過的天數
const passedDay = {
'1' : 0,
'2' : 31,
'3' : 59,
'4' : 90,
'5' : 120,
'6' : 151,
'7' : 181,
'8' : 212,
'9' : 243,
'10' : 273,
'11' : 304,
'12' : 334,
}
// 每個月份的天數
const dayOfMonth = {
'1' : 31,
'2' : 29,
'3' : 31,
'4' : 30,
'5' : 31,
'6' : 30,
'7' : 31,
'8' : 31,
'9' : 30,
'10' : 31,
'11' : 30,
'12' : 31,
}
</script>
</head>
<body>
<p class="styleTopic">萬年曆</p>
<p class="styleText">說明：只要輸入年、月、日，即可求得當天是星期幾喔！</p>
<input type="text" id="inputYear" name="year" placeholder="年"></input><br></br>
<input type="text" id="inputMonth" name="month" placeholder="月"></input><br></br>
<input type="text" id="inputDay" name="day" placeholder="日"></input><br></br>
<input class="styledButton" type="button" value="查詢" onclick="inquire()"></input>
<hr size="1px" align="center" width="100%">
<p class="styleText" id="result"></p>
</body>