以下是一个简单的JavaScript日历代码示例:
一、基础概念
<table>
)、表头(<th>
)、表体(<td>
)等元素来构建日历的结构。Date
对象来获取当前的日期信息,包括年、月、日等。通过Date
对象的方法,如getMonth()
(获取月份,注意返回值是从0开始的,0表示1月)、getDate()
(获取日)等。二、代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<meta name="viewport" content="width=device-width, initial - scale = 1.0">
<title>Simple Calendar</title>
<style>
table {
width: 100%;
border - collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<div id="calendar"></div>
<script>
function generateCalendar(year, month) {
const calendarDiv = document.getElementById('calendar');
const date = new Date(year, month);
const firstDay = new Date(year, month, 1);
const daysInMonth = new Date(year, month + 1, 0).getDate();
const startDay = firstDay.getDay() || 7;
let calendarHTML = '<table>';
calendarHTML += '<tr><th colspan="7">' + year + ' - ' + (month + 1) + '</th></tr>';
calendarHTML += '<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>';
let dayCount = 1;
for (let i = 0; i < 6; i++) {
calendarHTML += '<tr>';
for (let j = 0; j < 7; j++) {
if (i === 0 && j < startDay - 1) {
calendarHTML += '<td></td>';
} else if (dayCount > daysInMonth) {
calendarHTML += '<td></td>';
} else {
calendarHTML += '<td>' + dayCount + '</td>';
dayCount++;
}
}
calendarHTML += '</tr>';
if (dayCount > daysInMonth) break;
}
calendarHTML += '</table>';
calendarDiv.innerHTML = calendarHTML;
}
// 生成当前月份的日历
const today = new Date();
generateCalendar(today.getFullYear(), today.getMonth());
</script>
</body>
</html>
三、应用场景
四、可能遇到的问题及解决方法
Date
对象的getMonth()
方法返回值是从0开始的,如果在显示月份时没有注意这一点,就会导致月份显示错误。getMonth()
的返回值加1。border - collapse
、padding
等;仔细检查JavaScript中构建表格的循环逻辑,确保正确计算每个月的天数和起始日。