以下是
一个简单的
日历插件代码，使用 HTML、CSS 和 JavaScript 实现：
HTML 代码：
```html
<div class="
calendar">
<div class="
calendar-header">
<button class="prev-btn"><</button>
<div class="
calendar-title"></div>
<button class="next-btn">></button>
</div>
<div class="
calendar-body"></div>
</div>
```
CSS 代码：
```css
.
calendar {
width: 300px;
border: 1px solid #ccc;
font-family: Arial, sans-serif;
}
.
calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f2f2f2;
padding: 10px;
}
.
calendar-body {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: 5px;
padding: 10px;
}
.
calendar-cell {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
width: 30px;
border-radius: 50%;
cursor: pointer;
}
.
calendar-cell:hover {
background-color: #f2f2f2;
}
.
calendar-cell.today {
background-color: #ccc;
}
```
JavaScript 代码：
```javascript
// 获取当前日期
const today = new Date();
// 获取年份、月份、日期
let year = today.getFullYear();
let month = today.getMonth();
let date = today.getDate();
// 获取
日历容器
const
calendar = document.querySelector('.
calendar');
// 获取标题和主体
const title =
calendar.querySelector('.
calendar-title');
const body =
calendar.querySelector('.
calendar-body');
// 获取上
一个月按钮和下
一个月按钮
const prevBtn =
calendar.querySelector('.prev-btn');
const nextBtn =
calendar.querySelector('.next-btn');
// 绘制
日历
function draw
Calendar(year, month) {
// 设置标题
title.textContent = `${year}年${month + 1}月`;
// 清空主体内容
body.innerHTML = '';
// 获取当月第一天
const firstDay = new Date(year, month, 1);
// 获取当月最后一天
const lastDay = new Date(year, month + 1, 0);
// 获取上个月最后一天
const prevLastDay = new Date(year, month, 0);
// 计算当月第一天是星期几
const firstDayOfWeek = firstDay.getDay();
// 计算当月最后一天是星期几
const lastDayOfWeek = lastDay.getDay();
// 计算上个月最后一天是几号
const prevLastDate = prevLastDay.getDate();
// 计算当月最后一天是几号
const lastDate = lastDay.getDate();
// 计算总共要显示多少天
const totalDays = 42;
// 计算上个月要显示的天数
const prevDays = firstDayOfWeek;
// 计算下个月要显示的天数
const nextDays = totalDays - prevDays - lastDate;
// 绘制上个月的日期
for (let i = prevDays - 1; i >= 0; i--) {
const cell = document.createElement('div');
cell.classList.add('
calendar-cell');
cell.textContent = prevLastDate - i;
body.appendChild(cell);
}
// 绘制当月的日期
for (let i = 1; i <= lastDate; i++) {
const cell = document.createElement('div');
cell.classList.add('
calendar-cell');
cell.textContent = i;
if (year === today.getFullYear() && month === today.getMonth() && i === today.getDate()) {
cell.classList.add('today');
}
body.appendChild(cell);
}
// 绘制下个月的日期
for (let i = 1; i <= nextDays; i++) {
const cell = document.createElement('div');
cell.classList.add('
calendar-cell');
cell.textContent = i;
body.appendChild(cell);
}
}
// 初始化
日历
draw
Calendar(year, month);
// 上
一个月按钮点击事件
prevBtn.addEventListener('click', () => {
month--;
if (month < 0) {
year--;
month = 11;
}
draw
Calendar(year, month);
});
// 下
一个月按钮点击事件
nextBtn.addEventListener('click', () => {
month++;
if (month > 11) {
year++;
month = 0;
}
draw
Calendar(year, month);
});
```
这个
日历插件可以显示当前月份的
日历，并且支持点击上
一个月和下
一个月的按钮来切换月份。你可以根据自己的需求进行修改和扩展。
641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
