原生js写日历
原生JavaScript实现仿Windows 10系统日历效果的实例
在本文中，我们将使用原生JavaScript来实现一个仿Windows 10系统日历效果的实例，这个实例将包括以下功能：
1. 显示当前日期和星期几；
2. 点击按钮切换月份；
3. 显示指定日期的详细信息。
我们需要创建一个HTML文件，用于显示日历和相关按钮，以下是HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿Windows 10系统日历效果</title>
<style>
/* 在这里添加CSS样式 */
</style>
</head>
<body>
<div id="calendar"></div>
<button id="prevBtn">上个月</button>
<button id="nextBtn">下个月</button>
<div id="dateInfo"></div>
<script src="calendar.js"></script>
</body>
</html>
接下来，我们需要编写JavaScript代码来实现日历的功能，以下是`calendar.js`文件的内容：
// 获取元素
const calendar = document.getElementById('calendar');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const dateInfo = document.getElementById('dateInfo');
// 初始化日历数据
let currentDate = new Date();
let currentMonth = currentDate.getMonth();
let currentYear = currentDate.getFullYear();
let daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
let daysInWeek = ['日', '一', '二', '三', '四', '五', '六'];
let firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay();
let dateInfoText = '';
// 生成日历表格
function generateCalendar() {
let table = document.createElement('table');
table.border = '1';
let tr = document.createElement('tr');
for (let i = 0; i < 7; i++) {
let th = document.createElement('th');
th.innerText = daysInWeek[i];
tr.appendChild(th);
}
table.appendChild(tr);
let day = 1;
for (let i = 0; i < 6; i++) {
let tr = document.createElement('tr');
for (let j = 0; j < 7; j++) {
if (day > daysInMonth) break;
let td = document.createElement('td');
td.innerText = day;
td.onclick = function () {
selectDate(this);
};
tr.appendChild(td);
day++;
}
table.appendChild(tr);
}
calendar.innerHTML = '';
calendar.appendChild(table);
}
// 选择日期并显示详细信息
function selectDate(td) {
dateInfoText = `${td.innerText} ${new Date(currentYear, currentMonth, parseInt(td.innerText)).toLocaleDateString()}`;
dateInfo.innerText = dateInfoText;
}
// 上一个月
function prevMonth() {
if (currentMonth === 0) {
currentYear--;
currentMonth = 11; // JavaScript中月份是从0开始的，所以需要加11才能得到正确的月份值（1-12）
} else {
currentMonth--;
}
generateCalendar();
}
// 下一个月
function nextMonth() {
if (currentMonth === 11) {
currentYear++;
currentMonth = 0; // JavaScript中月份是从0开始的，所以需要加0才能得到正确的月份值（1-12）
} else {
currentMonth++;
}
generateCalendar();
}
// 初始化日历并绑定事件监听器
generateCalendar();
prevBtn.onclick = prevMonth;
nextBtn.onclick = nextMonth;
在这个实例中，我们首先获取了HTML文件中的元素，然后初始化了日历数据，包括当前日期、月份、年份、当月天数、一周的天数、第一天是星期几等，我们编写了`generateCalendar`函数来生成日历表格，`selectDate`函数来选择日期并显示详细信息，以及`prevMonth`和`nextMonth`函数来切换月份，我们调用这些函数来初始化日历并绑定事件监听器。
免责声明：本文内容来自用户上传并发布，站点仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。请核实广告和内容真实性，谨慎使用。
