<!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)
最新推荐文章于 2023-04-22 19:48:05 发布