用JavaScript写一个日历
时间: 2023-10-09 20:04:23 浏览: 78
好的,以下是一个简单的 JavaScript 日历代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 日历</title>
</head>
<body>
<h1>JavaScript 日历</h1>
<div id="calendar"></div>
<script>
// 获取当前日期
var today = new Date();
// 获取当前年份和月份
var currentMonth = today.getMonth();
var currentYear = today.getFullYear();
// 获取每个月的天数
function daysInMonth(month, year) {
return new Date(year, month + 1, 0).getDate();
}
// 获取每个月的第一天是周几
function firstDayOfMonth(month, year) {
return new Date(year, month, 1).getDay();
}
// 创建日历表格
function createCalendar(month, year) {
var calendar = document.getElementById("calendar");
// 清空日历表格
calendar.innerHTML = "";
// 创建表头
var table = document.createElement("table");
var headerRow = document.createElement("tr");
var months = [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月",
];
var headerCell = document.createElement("th");
headerCell.setAttribute("colspan", "7");
headerCell.textContent = months[month] + " " + year;
headerRow.appendChild(headerCell);
table.appendChild(headerRow);
// 创建星期几表头
var weekdays = ["日", "一", "二", "三", "四", "五", "六"];
var weekdayRow = document.createElement("tr");
for (var i = 0; i < weekdays.length; i++) {
var weekdayCell = document.createElement("th");
weekdayCell.textContent = weekdays[i];
weekdayRow.appendChild(weekdayCell);
}
table.appendChild(weekdayRow);
// 创建日期表格
var daysInCurrentMonth = daysInMonth(month, year);
var firstDay = firstDayOfMonth(month, year);
var currentDay = 1;
var currentRow = document.createElement("tr");
for (var i = 0; i < firstDay; i++) {
var emptyCell = document.createElement("td");
currentRow.appendChild(emptyCell);
}
while (currentDay <= daysInCurrentMonth) {
var cell = document.createElement("td");
cell.textContent = currentDay;
currentRow.appendChild(cell);
if ((currentDay + firstDay) % 7 === 0) {
table.appendChild(currentRow);
currentRow = document.createElement("tr");
}
currentDay++;
}
while (currentRow.children.length < 7) {
var emptyCell = document.createElement("td");
currentRow.appendChild(emptyCell);
}
table.appendChild(currentRow);
// 添加日历表格到页面
calendar.appendChild(table);
}
// 初始化日历
createCalendar(currentMonth, currentYear);
</script>
</body>
</html>
```
这个代码会创建一个包含当前月份的日历,并在页面上显示出来。你可以根据需要对其进行修改和扩展。