正文

HTML5轻松打造个性化日历：掌握核心代码，轻松实现日历功能

/0 浏览量
0329

在本文中，我们将学习如何使用HTML5、CSS3和JavaScript轻松创建一个个性化日历。通过掌握这些核心技术，你将能够轻松地实现一个功能强大、外观独特的日历组件，适用于个人网站、博客或应用程序。

1. HTML5结构

首先，我们需要为日历创建一个基本的HTML结构。以下是一个简单的日历HTML模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个性化日历</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="calendar">
        <div class="month-year">
            <span id="month-year">一月</span>
        </div>
        <div class="weekdays">
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
            <span>日</span>
        </div>
        <div class="days"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

这个HTML结构包括月份和年份的标题、一周七天的标题以及包含具体日期的日历部分。

2. CSS3样式

接下来，我们需要为日历添加一些CSS样式。以下是一个基本的CSS样式文件styles.css：

#calendar {
    width: 300px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.month-year {
    text-align: center;
    background-color: #333;
    color: white;
    padding: 10px;
}

.weekdays {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}

.weekdays span {
    background-color: #ddd;
    padding: 5px;
}

.days span {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    margin: 5px;
    background-color: #f9f9f9;
    cursor: pointer;
}

/* 为选中的日期添加样式 */
.selected-date {
    background-color: #3f51b5;
    color: white;
}

这个CSS文件设置了日历的布局和样式，包括背景色、字体和大小。

3. JavaScript功能

最后，我们需要添加一些JavaScript代码来实现日历的功能。以下是一个简单的JavaScript文件script.js：

document.addEventListener('DOMContentLoaded', function() {
    const today = new Date();
    const currentMonth = today.getMonth();
    const currentYear = today.getFullYear();

    displayMonth(currentMonth, currentYear);
});

function displayMonth(month, year) {
    const monthName = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月");
    document.getElementById('month-year').innerText = `${monthName[month]} ${year}`;

    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const firstDay = new Date(year, month, 1).getDay();

    const days = document.querySelector('.days');
    days.innerHTML = '';

    let dayCounter = 1;

    for (let i = 0; i < firstDay; i++) {
        days.innerHTML += `<span></span>`;
    }

    for (let i = 1; i <= daysInMonth; i++) {
        const day = document.createElement('span');
        day.textContent = i;
        day.setAttribute('data-day', i);
        if (i === new Date().getDate() && year === new Date().getFullYear() && month === new Date().getMonth()) {
            day.classList.add('selected-date');
        }
        day.addEventListener('click', function() {
            selectDate(i);
        });
        days.appendChild(day);
    }
}

function selectDate(day) {
    const selectedDates = document.querySelectorAll('.selected-date');
    selectedDates.forEach(function(date) {
        date.classList.remove('selected-date');
    });
    const selectedDay = document.querySelector(`.days span[data-day="${day}"]`);
    selectedDay.classList.add('selected-date');
}

这个JavaScript文件实现了日历的核心功能，包括显示当前月份的日期、高亮显示当前日期，并允许用户选择特定的日期。

通过以上三个步骤，我们已经成功创建了一个个性化的HTML5日历。你可以根据自己的需求调整样式和功能，以适应你的项目。

-- 展开阅读全文 --