<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
background-color: aqua;
border-collapse: collapse;
text-align: center;
}
td,
th {
height: 20px;
width: 50px;
border: 1px solid transparent;
transition: all 0.3s;
cursor: pointer;
}
th:hover {
background-color: bisque;
}
td:hover {
background-color: aliceblue;
z-index: 1;
}
input {
outline: none;
width: 50px;
}
</style>
</head>
<body>
<table>
<caption>
請輸入年:<input type="text" id="year" placeholder="1900"> 請輸入月:
<input type="text" id="month" placeholder="1"><br><br><button>打印</button>
<br><br></caption>
<tr>
<th>星期天</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
</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>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
var btn = document.querySelector('button');
var td = document.querySelectorAll('td');
btn.addEventListener('click', wannianli);
wannianli();
function wannianli(year, month) {
var year = document.querySelector('#year').value;
var month = document.querySelector('#month').value;
if (year < 1900 || month < 1 || month > 12) {
year = 1900;
month = 1;
}
var totalDay = 0;
//1:計算從1900年1月1號 到用戶輸入的年份的整年的天數 1900--用戶輸入的年份的前一年
for (var i = 1900; i < year; i++) {
if ((i % 4 == 0 && i % 100 != 0) || (i % 400 == 0)) {
totalDay += 366;
} else {
totalDay += 365;
}
}
//2:計算用戶輸入的年份的經過月份的天數(例如用戶輸入的是2020年10月 加上2020年1月--9月的總天數)
for (var i = 1; i < month; i++) {
switch (i) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
totalDay += 31;
break;
case 4:
case 6:
case 9:
case 11:
totalDay += 30;
break;
case 2:
if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0))
totalDay += 29;
else
totalDay += 28;
break;
}
}
//計算用戶輸入的月份的天數(2020年10月 求10月1號這一天 前面加到2020年9月30號 因爲10月還有一天)
// totalDay++;
//計算用戶輸入的年份和月份的第一天是星期幾
var week = (totalDay + 1) % 7;
console.log(week);
// td[week].innerHTML = 1;
//問題:當前月的天數 輸出截止數 下面的循環我現在不確定用戶輸入的月份的天數(31/30/29/28)
//計算用戶輸入的月份的天數
var monthDay = 31;
switch (month) {
case 4:
case 6:
case 9:
case 11:
monthDay = 30;
break;
case 2:
monthDay = ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) ? 29 : 28;
break;
}
// 排異
for (var i = 0; i < 30; i++) {
td[i].innerHTML = "";
}
//輸出日期(從1號開始到當前月的截止)
for (var i = week, j = 1; j <= monthDay; j++, i++) {
td[i].innerHTML = j;
}
}
</script>
</body>
</html>
萬年曆(JavaScript)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.