需求：实现日历生成器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同志交友</title>
<style>
input {
width: 50px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
}
select {
width:100px;
padding:10px;
}
button {
padding: 10px 20px;
border: 1px solid #ccc;
background: #f5f5f5;
cursor: pointer;
}
#res {
margin-top:20px;
}
#res table {
width: 700px;
table-layout: fixed;
border-collapse: collapse;
}
#res td,#res th {
padding: 10px;
border: 1px solid #999;
text-align: center;
}
.red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<h1>日历生成器</h1>
<hr>
请输入本月多少天:
<input type="number" id="days" max="31" min="28" step="1" value="31">
请输入本月一号星期几:
<select id="weekday">
<option value="0">星期日</option>
<option value="1">星期一</option>
<option value="2">星期二</option>
<option value="3">星期三</option>
<option value="4">星期四</option>
<option value="5">星期五</option>
<option value="6">星期六</option>
</select>
<button onclick="makeCalendar()">生成日历</button>
<div id="res"></div>
<script>
//声明函数
function makeCalendar() {
//获取 每月天数
var days = Number(document.getElementById(‘days‘).value);
//获取一号是星期几
var weekday = Number(document.getElementById(‘weekday‘).value);
//计算日历有多少行
var rows = Math.ceil((days + weekday) / 7);
//定义变量
var html = ‘<table>‘;
html += `
<tr>
<th class="red">星期日</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th class="green">星期六</th>
</tr>
`;
var dayNumber = ‘‘;
//循环 生成表格
for (var i = 0; i < rows; i ++) {
html += ‘<tr>‘;
for (j = 1; j <= 7; j ++) {
if (j === 1) {
html += ‘<td class="red">‘;
} else if (j === 7) {
html += ‘<td class="green">‘;
} else {
html += ‘<td>‘;
}
dayNumber = j + i*7 - weekday; //计算每个单元格的数值
//判断是否超出范围
if (dayNumber <= 0 || dayNumber > days) {
dayNumber = ‘‘;
}
html += dayNumber+‘</td>‘;
}
html += ‘</tr>‘;
}
html += ‘</table>‘
//添加表格内容到页面
document.getElementById(‘res‘).innerHTML = html;
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/neymargoal/p/9470953.html
时间： 2024-07-29 06:20:18