要使用JavaScript制作一個簡單的日歷效果,可以按照以下步驟進行:
<div id="calendar"></div>
var calendarContainer = document.getElementById("calendar");
function generateCalendar() {
// 在這里生成日歷的代碼
}
generateCalendar(); // 調用函數生成日歷
function generateCalendar() {
var date = new Date();
var year = date.getFullYear(); // 獲取當前年份
var month = date.getMonth(); // 獲取當前月份
var daysInMonth = new Date(year, month + 1, 0).getDate(); // 獲取當前月份的天數
var calendarHTML = "<table>" +
"<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>"; // 表格頭部
var dayOfWeek = new Date(year, month, 1).getDay(); // 獲取當前月份的第一天是星期幾
calendarHTML += "<tr>"; // 創建一個新的行
// 在行中添加空白格子,用于對齊第一天的位置
for (var i = 0; i < dayOfWeek; i++) {
calendarHTML += "<td></td>";
}
// 添加日期格子,從1到月份的天數
for (var i = 1; i <= daysInMonth; i++) {
calendarHTML += "<td>" + i + "</td>";
if ((dayOfWeek + i) % 7 === 0) { // 如果是每周的最后一天(星期六),創建一個新的行
calendarHTML += "</tr><tr>";
}
}
calendarHTML += "</tr></table>"; // 表格尾部
calendarContainer.innerHTML = calendarHTML; // 將生成的日歷添加到容器中
}
window.onload = function() {
generateCalendar();
};
這樣,就可以實現一個簡單的日歷效果。每次加載頁面時,都會根據當前日期生成一個新的日歷。