JavaScript代码实现简单日历效果

引言

日历是人们生活中必不可少的一部分，Javascript通过操作DOM元素以及CSS样式，实现了多种简单的日历效果。本文将详细介绍JavaScript如何实现一个简单的日历效果。

分析与目标

首先，我们要对一个日历的样式进行分析，发现日历主要是由星期和日期构成的，其次各个日期的显示状态需通过计算天数来完成。

所以，我们的目标就很明确了：

显示星期和日期；
计算日期，并按照一定样式进行显示。

实现

显示星期和日期

首先，我们要为html页面添加一个日历容器，命名为calendar-wrapper，其内包含两个div容器，一个用于显示星期，一个用于显示日期。如下所示：

<div class="calendar-wrapper">
  <div class="calendar-weekdays"></div>
  <div class="calendar-days"></div>
</div>

其中calendar-weekdays用于显示星期，calendar-days用于显示日期。

然后，我们在Javascript中获取这两个容器，用var关键字定义变量保存：

var $wrapper = document.querySelector('.calendar-wrapper');
var $weekdays = $wrapper.querySelector('.calendar-weekdays');
var $days = $wrapper.querySelector('.calendar-days');

接下来，我们需要给calendar-weekdays和calendar-days设置样式，使得它们呈现出居中对齐、固定高度等效果。

.calendar-wrapper {
  width: 100%;
  text-align: center;
  height: 100px;
}
.calendar-weekdays, .calendar-days {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: calc(50% - 20px);
  margin: 0 10px;
  box-sizing: border-box;
  padding: 10px;
}

最后，我们通过循环创建<div>标签，添加星期和日期：

var weekDays = ['日', '一', '二', '三', '四', '五', '六'];
weekDays.forEach(function(weekDay) {
  var $weekDay = document.createElement('div');
  $weekDay.textContent = weekDay;
  $weekdays.appendChild($weekDay);
});

for (var i = 1; i <= 31; i++) {
  var $day = document.createElement('div');
  $day.textContent = i;
  $days.appendChild($day);
}

经过以上代码的实现，我们就可以在HTML页面看到一个基本的日历效果了。

计算日期，并按照一定样式进行显示

考虑到日历界面主要呈现的是日期，所以我们需要计算出当前月份的天数，并把它们显示在相应的日期格中。我们可以通过new Date()获取当前年份、月份和日期，并使用Date对象中的一些方法获得当前月份的总天数，如下所示：

var now = new Date();
var month = now.getMonth() + 1;
var year = now.getFullYear();
var daysInMonth = new Date(year, month, 0).getDate();

其中new Date(year, month, 0)第三个参数必须传0，用于返回前一个月的最后一天，从而得出当前月份的天数。

然后，我们通过循环创建<div>标签，添加星期和日期：

for (var i = 1; i <= daysInMonth; i++) {
  var $day = document.createElement('div');
  $day.textContent = i;
  $days.appendChild($day);
}

但是，上述代码还不能正常显示当前日期和星期。所以，我们还需要编写一些辅助的函数，获取当前日期和星期，并根据需要对它们进行处理。下面是一个获取当前日期和星期的函数：

function getDate() {
  var now = new Date();
  var month = now.getMonth() + 1;
  var year = now.getFullYear();
  var daysInMonth = new Date(year, month, 0).getDate();
  var day = now.getDate();
  var weekDay = now.getDay();
  return { month: month, year: year, daysInMonth: daysInMonth, day: day, weekDay: weekDay };
}

接下来，我给出两个示例：

示例1：高亮显示当前的日期

这个示例要求在日历中高亮显示当前日期，我们可以在常规的日期样式基础上，通过添加CSS样式达到这个要求：

.calendar-days div.today {
  background-color: #3ea6ff;
  color: #fff;
}

然后，我们使用获取当前日期的函数，结合上述CSS样式实现日历中日期的高亮显示：

function updateCalendar() {
  var currentDate = getDate().day;
  var $days = document.querySelector('.calendar-days');
  var days = Array.from($days.children);
  days.forEach(function(day) {
    day.classList.remove('today');
    if (day.textContent === String(currentDate)) {
      day.classList.add('today');
    }
  });
}

最后，我们还需要定时器实现定时更新：

setInterval(function() {
  updateCalendar();
}, 60 * 1000);

示例2：根据星期编号计算日期

这个示例要求通过输入星期编号，可以在日历中选择任意一个日期。我们使用获取当前日期和星期的函数，结合输入的星期编号，计算出日期，并更新日历中相应的日期：

function updateCalendarByWeekday(weekday) {
  var delta = (weekday - getDate().weekDay + 7) % 7 || 7;
  var date = getDate();
  date.day += delta;
  if (date.day > date.daysInMonth) {
    date.month += 1;
    date.day -= date.daysInMonth;
  }
  updateCalendarView(date);
}

function updateCalendarView(date) {
  var $days = document.querySelector('.calendar-days');
  var days = Array.from($days.children);
  days.forEach(function(day) {
    day.remove();
  }); 
  var daysInMonth = new Date(date.year, date.month, 0).getDate();
  for (var i = 1; i <= daysInMonth; i++) {
    var $day = document.createElement('div');
    $day.textContent = i;
    $days.appendChild($day);
  }
  var $wrapper = document.querySelector('.calendar-wrapper');
  $wrapper.querySelector('.calendar-weekdays').scrollIntoView({ behavior: 'smooth' });
}

使用该函数时，我们可以添加一个输入框，让用户输入星期编号：

<div class="input-group">
  <input type="number" id="weekday-input" placeholder="Input weekday number...">
  <button type="button" onclick="updateCalendarByWeekday(+document.querySelector('#weekday-input').value)">Go!</button>
</div>

这样，我们就可以根据输入的星期编号，在日历中选择相应的日期了。

总结

至此，本文介绍了如何使用JavaScript实现简单的日历效果，经过上述代码的实现，我们可以在HTML页面看到一个基本的日历效果，并且可以通过定时器、输入框等交互方式，实现了日历中部分日期的高亮显示和自定义选择，最终实现了一个可以展示当前时间和方便选择日期的日历。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript代码实现简单日历效果 - Python技术站

JavaScript代码实现简单日历效果