正文

JavaScript编写日历牌：轻松实现日期选择与显示攻略

/0 浏览量
0511

在Web开发中，日历牌是一个常用的功能，它可以帮助用户轻松选择和查看日期。使用JavaScript编写一个日历牌不仅能够提升用户体验，还能让你的网站更加实用。本文将详细介绍如何使用JavaScript实现一个基本的日历牌，包括日期选择和显示功能。

一、准备工作

在开始编写日历牌之前，我们需要做一些准备工作：

  1. HTML结构：创建一个基本的HTML结构，用于显示日历牌。
  2. CSS样式：为日历牌添加一些基本的样式，使其看起来更加美观。
  3. JavaScript逻辑：编写JavaScript代码，实现日期选择和显示功能。

1. HTML结构

以下是一个简单的HTML结构示例：

<div id="calendar">
  <div class="calendar-header">
    <button class="prev-month">上一月</button>
    <span class="month-year">2023年1月</span>
    <button class="next-month">下一月</button>
  </div>
  <div class="calendar-body">
    <div class="weekdays">
      <div>日</div>
      <div>一</div>
      <div>二</div>
      <div>三</div>
      <div>四</div>
      <div>五</div>
      <div>六</div>
    </div>
    <div class="days"></div>
  </div>
</div>

2. CSS样式

以下是一些基本的CSS样式：

#calendar {
  width: 300px;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f5f5f5;
}

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

.days div {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.active-day {
  background-color: #f0f0f0;
}

3. JavaScript逻辑

接下来，我们将编写JavaScript代码，实现日期选择和显示功能。

const calendar = document.getElementById('calendar');
const monthYear = calendar.querySelector('.month-year');
const days = calendar.querySelector('.days');

let currentDate = new Date();
let currentMonth = currentDate.getMonth();
let currentYear = currentDate.getFullYear();

function renderCalendar() {
  // 清空当前日历
  days.innerHTML = '';

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

  // 获取当前月的第一天是星期几
  const firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay();

  // 创建日历内容
  for (let i = 0; i < firstDayOfWeek; i++) {
    days.innerHTML += '<div></div>';
  }

  for (let i = 1; i <= daysInMonth; i++) {
    const dayDiv = document.createElement('div');
    dayDiv.textContent = i;
    dayDiv.addEventListener('click', () => selectDay(i));
    days.innerHTML += dayDiv;
  }
}

function selectDay(day) {
  currentDate = new Date(currentYear, currentMonth, day);
  monthYear.textContent = `${currentDate.getFullYear()}年${currentDate.getMonth() + 1}月`;
  renderCalendar();
}

function prevMonth() {
  currentMonth--;
  if (currentMonth < 0) {
    currentMonth = 11;
    currentYear--;
  }
  renderCalendar();
}

function nextMonth() {
  currentMonth++;
  if (currentMonth > 11) {
    currentMonth = 0;
    currentYear++;
  }
  renderCalendar();
}

// 初始化日历
renderCalendar();

// 绑定按钮事件
calendar.querySelector('.prev-month').addEventListener('click', prevMonth);
calendar.querySelector('.next-month').addEventListener('click', nextMonth);

二、总结

通过以上步骤，我们成功实现了一个基本的日历牌。用户可以点击不同的日期来选择日期，同时日历牌会显示当前选中的月份和年份。

当然，这只是一个简单的示例，你可以根据自己的需求进行扩展和修改。例如，可以添加日期选择、事件提醒等功能，使日历牌更加实用。

-- 展开阅读全文 --