以下是一个使用JavaScript制作简单日历的示例代码:
首先添加头部代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript日历</title>
</head>
接着再添加显示部分,这里我们用一个div标签“calendar”来实现:
<body>
<div id="calendar"></div>
然后我们部署js代码实现页面显示日历:
<script>
document.addEventListener('DOMContentLoaded', function () {
// 获取当前日期
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
// 月份名称数组
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
'October', 'November', 'December'
];
// 创建日历标题
var calendar = document.getElementById('calendar');
var title = document.createElement('h2');
title.textContent = months[month] + " " + year;
calendar.appendChild(title);
// 创建表格用于日历
var table = document.createElement('table');
var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
// 创建表头(星期几)
var thead = document.createElement('thead');
var tr = document.createElement('tr');
days.forEach(function (day) {
var th = document.createElement('th');
th.textContent = day;
tr.appendChild(th);
});
thead.appendChild(tr);
table.appendChild(thead);
// 创建表体(日期)
var tbody = document.createElement('tbody');
// 计算当月第一天是星期几
var firstDay = new Date(year, month, 1).getDay();
// 计算当月总天数
var daysInMonth = new Date(year, month + 1, 0).getDate();
// 填充日期单元格
var dayCount = 1;
var tr = document.createElement('tr');
for (var i = 0; i < firstDay; i++) {
var td = document.createElement('td');
tr.appendChild(td);
}
while (dayCount <= daysInMonth) {
var td = document.createElement('td');
td.textContent = dayCount;
tr.appendChild(td);
if ((dayCount + firstDay) % 7 === 0) {
tbody.appendChild(tr);
tr = document.createElement('tr');
}
dayCount++;
}
if (tr.childNodes.length > 0) {
tbody.appendChild(tr);
}
table.appendChild(tbody);
calendar.appendChild(table);
});
</script>
最后我们添加底部代码:
</body>
</html>
这个日历显示了当前月份的日期布局,按照星期日到星期六的顺序排列。如果想要进一步扩展功能,例如添加点击事件来选择日期或者切换月份,可以在这个基础上继续完善代码。