使用javascript写一个实时更新的日历的模块,表头为当前年月,当前日期底色为圆底蓝色
时间: 2024-05-05 19:21:10 浏览: 144
一个用javascript写的日历
以下是一个使用 JavaScript 实现实时更新的日历模块的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实时更新日历模块</title>
<style>
table {
border-collapse: collapse;
}
td {
width: 30px;
height: 30px;
text-align: center;
vertical-align: middle;
}
.circle-blue {
border-radius: 50%;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1 id="calendar-header"></h1>
<table id="calendar-table"></table>
<script>
// 获取当前日期
const today = new Date();
// 获取当前年月
const year = today.getFullYear();
const month = today.getMonth() + 1;
// 更新日历表头
const calendarHeader = document.getElementById('calendar-header');
calendarHeader.innerText = `${year}年${month}月`;
// 更新日历表格
const calendarTable = document.getElementById('calendar-table');
let html = '<tr>';
for (let i = 1; i <= 31; i++) {
const date = new Date(year, month - 1, i);
if (date.getMonth() + 1 !== month) {
html += '<td></td>';
} else {
html += `<td${i === today.getDate() ? ' class="circle-blue"' : ''}>${i}</td>`;
}
if (i % 7 === 0) {
html += '</tr><tr>';
}
}
html += '</tr>';
calendarTable.innerHTML = html;
</script>
</body>
</html>
```
这段代码会生成一个带有表头和表格的日历模块,并实时更新表头和每个日期的底色。其中,`year` 和 `month` 变量表示当前年月,`today` 变量表示当前日期;`calendarHeader` 和 `calendarTable` 变量分别表示日历表头和表格;`html` 变量用于拼接表格的 HTML 代码,`td` 标签表示一个日期单元格,如果该单元格不属于当前月份,则留空;如果该单元格是当前日期,则添加 `circle-blue` 类名以改变其底色。
阅读全文