原生js制作日历控件实例分享

下面我会给出详细的“原生js制作日历控件实例分享”的攻略：

一、准备工作

首先，我们需要定义一些全局变量和函数：

var year = new Date().getFullYear();  // 获取当前年份
var month = new Date().getMonth() + 1;  // 获取当前月份
var date = new Date().getDate();  // 获取当前日期

var month_days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  // 每个月份对应的天数
var days_text = ['日', '一', '二', '三', '四', '五', '六'];  // 星期几的文本表示

// 获取某年某月第一天是星期几
function getFirstDayOfWeek(year, month) {
  return new Date(year + '-' + month + '-01').getDay();
}

// 获取某年某月的天数
function getMonthDays(year, month) {
  if (month == 2 && isLeapYear(year)) {
    return 29;
  } else {
    return month_days[month - 1];
  }
}

// 判断某年是否为闰年
function isLeapYear(year) {
  return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
}

二、生成日历

接下来，我们需要生成一个日历的HTML结构，并且根据当前年份、月份动态生成日历。这个部分的代码可以分为两部分，在前一部分中，我们会根据当前年份、月份，计算出每个日期对应的星期数和在日历表格中对应的位置，然后将每个日期对应的HTML代码存放到一个数组中。在后一部分，我们会将日历表格HTML代码拼接起来，并将其插入到我们的网页中。

// 生成日历表格HTML代码
function generateCalendarHTML(year, month) {
  var firstDayOfWeek = getFirstDayOfWeek(year, month);
  var monthDays = getMonthDays(year, month);
  var htmlArr = [];

  // 将每个日期对应的HTML代码存放到数组中
  for (var i = 1; i <= monthDays; i++) {
    var week = (firstDayOfWeek + i - 1) % 7;  // 计算星期数
    var position = (firstDayOfWeek + i - 1) / 7;  // 计算在日历表格中的位置
    var dateStr = year + '-' + month + '-' + i;

    if (i == 1) {
      htmlArr.push('<tr>');
      for (var j = 0; j < firstDayOfWeek; j++) {
        htmlArr.push('<td></td>');
      }
    }

    htmlArr.push('<td date="' + dateStr + '" week="' + week + '">' + i + '</td>');

    if (position == Math.floor(position) && position % 5 == 0 && i != monthDays) {
      htmlArr.push('</tr><tr>');
    }
  }

  // 将HTML代码拼接起来
  var html = '<table>' +
                '<thead>' +
                    '<tr>' +
                        '<th>' + year + '年' + month + '月</th>' +
                    '</tr>' +
                    '<tr>' +
                        '<th>' + days_text.join('</th><th>') + '</th>' +
                    '</tr>' +
                '</thead>' +
                '<tbody>' +
                    htmlArr.join('') +
                '</tbody>' +
            '</table>';

  return html;
}

// 将日历插入到指定的DOM元素中
function insertCalendar(calendarDOM, year, month) {
  var html = generateCalendarHTML(year, month);
  calendarDOM.innerHTML = html;
}

三、添加事件

现在，我们已经生成了日历，但需要为每个日期元素添加点击事件，以响应用户的操作。此外，我们还可以添加事件来控制上一个月、下一个月按钮的点击。以下是相应部分的代码：

// 为日历的日期元素添加点击事件
function addDateClickEvent(calendarDOM, callback) {
  calendarDOM.addEventListener('click', function(event) {
    var target = event.target;
    if (target.tagName === 'TD') {
      var dateStr = target.getAttribute('date');
      callback(dateStr);
    }
  });
}

// 为日历的上一页按钮添加点击事件
function addPrevMonthClickEvent(calendarDOM, callback) {
  var prevBtn = calendarDOM.querySelector('.prev');
  if (prevBtn) {
    prevBtn.addEventListener('click', function() {
      callback();
    })
  }
}

// 为日历的下一页按钮添加点击事件
function addNextMonthClickEvent(calendarDOM, callback) {
  var nextBtn = calendarDOM.querySelector('.next');
  if (nextBtn) {
    nextBtn.addEventListener('click', function() {
      callback();
    })
  }
}

四、示例说明

接下来，我会给出两个从生成日历到添加事件的示例说明。

示例一：在网页中生成当前月份的日历

var calendarDOM = document.querySelector('.calendar');
insertCalendar(calendarDOM, year, month);
addDateClickEvent(calendarDOM, function(dateStr) {
  console.log('你选择了日期：' + dateStr);
});

在上述代码中，我们首先获取DOM中class为“calendar”的元素，然后调用insertCalendar函数生成当前月份的日历，并将其插入到calendarDOM元素中。接着，我们为calendarDOM中的所有日期元素添加了点击事件，当用户选择某个日期时，会在控制台打印出日期对应的字符串。

示例二：在网页中生成上一月/下一月的日历

var calendarDOM = document.querySelector('.calendar');
var selectedYear = year;
var selectedMonth = month;
insertCalendar(calendarDOM, selectedYear, selectedMonth);

addPrevMonthClickEvent(calendarDOM, function() {
  selectedMonth--;
  if (selectedMonth < 1) {
    selectedYear--;
    selectedMonth = 12;
  }
  insertCalendar(calendarDOM, selectedYear, selectedMonth);
});

addNextMonthClickEvent(calendarDOM, function() {
  selectedMonth++;
  if (selectedMonth > 12) {
    selectedYear++;
    selectedMonth = 1;
  }
  insertCalendar(calendarDOM, selectedYear, selectedMonth);
});

在上述代码中，我们首先获取DOM中class为“calendar”的元素，并定义了selectedYear和selectedMonth两个变量，用于记录当前显示的年份和月份。接着，我们调用insertCalendar函数生成当前月份的日历，并将其插入到calendarDOM元素中。

为了实现上一页/下一页的功能，我们为calendarDOM中的上一页和下一页按钮添加了点击事件。当用户点击上一页按钮时，我们减少selectedMonth，若selectedMonth小于1，则将selectedYear减1，并将selectedMonth设为12。之后，我们调用insertCalendar函数生成对应月份的日历。类似地，当用户点击下一页按钮时，我们增加selectedMonth，若selectedMonth大于12，则将selectedYear加1，并将selectedMonth设为1。之后，我们调用insertCalendar函数生成对应月份的日历。