HTML5怎么制作日历组件_HTML5日历功能完整实现-html教程-PHP中文网

HTML5怎么制作日历组件_HTML5日历功能完整实现

絕刀狂花

发布： 2025-10-22 22:31:02

原创

688人浏览过

答案：该HTML5日历组件通过HTML结构搭建、CSS美化样式、JavaScript实现月份切换与日期渲染，支持高亮当前日期并可扩展事件标记等功能。

html5怎么制作日历组件_html5日历功能完整实现

制作一个HTML5日历组件，核心是结合HTML、CSS和JavaScript来实现日期展示、交互与样式美化。下面是一个完整的日历功能实现方法，包含基础结构、样式设计和动态逻辑处理。

1. HTML结构搭建

使用语义化标签构建日历容器，包含头部（年月切换）和主体部分（星期标题与日期格子）。

<div class="calendar">
  <div class="calendar-header">
    <button id="prev-month"><</button>
    <h2 id="month-year"></h2>
    <button id="next-month">></button>
  </div>
  <div class="calendar-body">
    <div class="weekdays">
      <span>日</span>
      <span>一</span>
      <span>二</span>
      <span>三</span>
      <span>四</span>
      <span>五</span>
      <span>六</span>
    </div>
    <div class="dates" id="dates"></div>
  </div>
</div>

登录后复制

2. CSS样式美化

通过Flex布局实现整齐的网格排列，提升视觉体验。

.calendar {
  width: 300px;
  margin: 50px auto;
  font-family: Arial, sans-serif;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #007bff;
  color: white;
  padding: 10px 20px;
}

#prev-month, #next-month {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  color: white;
}

#month-year {
  margin: 0;
  font-size: 1.2em;
}

.weekdays {
  display: flex;
  background: #f1f1f1;
  border-bottom: 1px solid #ddd;
}

.weekdays span {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  color: #555;
}

.dates {
  display: flex;
  flex-wrap: wrap;
}

.dates span {
  flex-basis: 14.28%;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  min-height: 40px;
  line-height: 40px;
}

.dates span:hover {
  background: #e9ecef;
}

.dates span.today {
  background: #007bff;
  color: white;
  border-radius: 50%;
}

登录后复制

3. JavaScript实现动态功能

控制月份切换、生成日期、高亮今天等核心功能。

闪光简历

一款专业的智能AI简历制作工具

查看详情

立即学习“前端免费学习笔记（深入）”；

<script>
let today = new Date();
let currentMonth = today.getMonth();
let currentYear = today.getFullYear();

const monthNames = [
  "一月", "二月", "三月", "四月", "五月", "六月",
  "七月", "八月", "九月", "十月", "十一月", "十二月"
];

const prevBtn = document.getElementById("prev-month");
const nextBtn = document.getElementById("next-month");
const monthYearEl = document.getElementById("month-year");
const datesEl = document.getElementById("dates");

function renderCalendar() {
  // 清空日期区
  datesEl.innerHTML = "";

  // 获取当前月第一天和天数
  const firstDay = new Date(currentYear, currentMonth, 1).getDay();
  const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

  // 显示当前年月
  monthYearEl.textContent = `${currentYear}年 ${monthNames[currentMonth]}`;

  // 填充空白格子（上个月末尾）
  for (let i = 0; i < firstDay; i++) {
    const emptySpan = document.createElement("span");
    datesEl.appendChild(emptySpan);
  }

  // 填充当前月日期
  for (let day = 1; day <= daysInMonth; day++) {
    const daySpan = document.createElement("span");
    daySpan.textContent = day;

    // 高亮今天
    if (
      day === today.getDate() &&
      currentMonth === today.getMonth() &&
      currentYear === today.getFullYear()
    ) {
      daySpan.classList.add("today");
    }

    datesEl.appendChild(daySpan);
  }
}

// 切换事件
prevBtn.addEventListener("click", () => {
  currentMonth--;
  if (currentMonth < 0) {
    currentMonth = 11;
    currentYear--;
  }
  renderCalendar();
});

nextBtn.addEventListener("click", () => {
  currentMonth++;
  if (currentMonth > 11) {
    currentMonth = 0;
    currentYear++;
  }
  renderCalendar();
});

// 初始化
renderCalendar();
</script>

登录后复制