JavaScript 月歷是前端開(kāi)發(fā)中常見(jiàn)的需求之一，可以用于展示一個(gè)月的日程安排、一個(gè)月的節(jié)日、或者其他需要按日顯示的信息。下面我們就來(lái)介紹如何使用 JavaScript 實(shí)現(xiàn)一個(gè)基于 HTML 和 CSS 的月歷。

首先，我們需要寫(xiě)出一個(gè) HTML 的框架，用來(lái)展示一個(gè)月的日歷。一個(gè)簡(jiǎn)單的框架可以是這樣的：

<div class="calendar">
<div class="header"></div>
<div class="weekdays"></div>
<div class="days"></div>
</div>

其中，.header用于顯示當(dāng)前月份，.weekdays用于顯示一周的日期，.days用于顯示一個(gè)月的日期。

下一步，我們需要使用 JavaScript 來(lái)為日歷填充內(nèi)容。首先是填充當(dāng)前月份和一周的日期：

let now = new Date(); //獲取當(dāng)前時(shí)間
let year = now.getFullYear();
let month = now.getMonth() + 1;
let currentDate = now.getDate();
document.querySelector('.header').innerText = year + '年' + month + '月'; //顯示當(dāng)前月份
document.querySelector('.weekdays').innerHTML = '
日
一
二
三
四
五
六
'; //顯示一周的日期

然后是填充一個(gè)月的日期：

let days = getDaysOfMonth(year, month); //獲取當(dāng)前月份的天數(shù)
let firstDayOfMonth = new Date(year, month - 1, 1).getDay(); //獲取當(dāng)前月份第一天是星期幾
let lastDayOfPrevMonth = new Date(year, month - 1, 0).getDate(); //獲取上個(gè)月的最后一天
let daysHtml = '';
//添加上個(gè)月的最后幾天
for(let i = firstDayOfMonth - 1; i >= 0; i--) {
daysHtml += '
' + (lastDayOfPrevMonth - i) + '
';
}
//添加本月的所有日期
for(let i = 1; i<= days; i++) {
let className = 'day';
if(i == currentDate) {
className += ' current-day';
}
daysHtml += '
' + i + '
';
}
//添加下個(gè)月的前幾天
for(let i = 1; i<= 42 - days - firstDayOfMonth; i++) {
daysHtml += '
' + i + '
';
}
document.querySelector('.days').innerHTML = daysHtml;

這段代碼中，getDaysOfMonth(year, month)是一個(gè)自定義的函數(shù)，用于獲取當(dāng)前月份的天數(shù)。具體實(shí)現(xiàn)可以是：

function getDaysOfMonth(year, month) {
return new Date(year, month, 0).getDate();
}

最后，在 CSS 中添加樣式即可：

.calendar {
border: 1px solid #ccc;
width: 300px;
height: 300px;
font-size: 14px;
}
.header {
height: 30px;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.weekdays {
display: flex;
height: 30px;
line-height: 30px;
text-align: center;
}
.weekdays div {
flex-basis: 14.28%;
}
.days {
display: flex;
flex-wrap: wrap;
height: 240px;
}
.day {
flex-basis: 14.28%;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
}
.current-day {
background-color: #ccc;
}
.prev-month, .next-month {
color: #ccc;
}

這樣，我們就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的 JavaScript 月歷，并且可以根據(jù)需要添加更多的功能，比如顯示月份切換、顯示日程安排等等。