原生JS实现日历

时间 2019-11-10

标签原生实现日历栏目 JavaScript 繁體版

原文原文链接

这周写本身的项目发现又用到日历了，加之本身毕业以后的第一个工做中遇到的任务也是须要写个日历(组员写了，我就不用写了)

今天就来好好折腾一下日历是怎么写的。html

首先，咱们看看 windows 的日历。发现总共有这么几个元素。先实现试试。

1.年份的选择、月份的选择
2.周一 ~ 周日(周日 ~ 周六)
3.日历格子 6*7 = 42

从数据的角度来分析日历的实现是比较简单的

1.咱们须要显示一个当前时间的结构 - new Date()
2.咱们须要显示当月的信息 - [星期(周一~周日)，日期(1-[28,29,30,31])]
- 其中咱们只要知道了每月的 1日是星期几，就能很容易地摆放后面的日子(万事开头难)。
- 咱们最多须要 6 行来显示咱们的日期，由于要考虑周一是星期日的状况 1+7*4 = 29(五行)显然是不够的
- 肯定了 6 行以后，咱们发现咱们可能须要获取上个月，和下个月多出来的几天的摆放位置。
- 不一样年份的不一样月的 2月份，咱们知道它的日期是不一样的，因此咱们还须要判断平年仍是闰年。
3.显示上个月，下个月的切换。咱们发现须要有个函数来帮咱们更新日历。windows

这里咱们就要考虑一下，到底要怎么更新这些 dom 里面的数据了，从新删除插入 dom 确定是不太好的。数组

分析完以后，让咱们跟着新增/修改一些代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
<style>
  .week-item {
    display: inline-block;
    width: 80px;
    height: 40px;
    line-height: 40px;
    border: 1px solid sandybrown;
    text-align: center;
  }
  .date-item {
    display: inline-block;
    width: 80px;
    height: 40px;
    line-height: 40px;
    border: 1px solid beige;
    text-align: center;
  }
</style>
</head>
<body>
  <div class="wrapper">
    <div class="year-line">
      <button id="preMonth" class="year-prev">上一月</button>
      <button id="nowYear" class="year-now"></button>
      <button id="nowMonth"></button>
      <button id="nowDate"></button>
      <button id="nextMonth" class="year-next">下一月</button>
    </div>
    <div id="weekLine" class="week-line"></div>
    <div id="dateWrap" class="date-wrap"></div>
  </div>
</body>
<script>
  // 工具方法 - start
  // 1.为了得到每月的日期有多少，咱们须要判断 平年闰年[四年一闰，百年不闰，四百年再闰]
  const isLeapYear = (year) => {
    return (year % 400 === 0) || (year % 100 !== 0 && year % 4 === 0);
  };
  // 2.得到每月的日期有多少，注意 month - [0-11]
  const getMonthCount = (year, month) => {
    let arr = [
      31, null, 31, 30, 
      31, 30, 31, 31,
      30, 31, 30, 31
    ];
    let count = arr[month] || (isLeapYear(year) ? 29 : 28);
    return Array.from(new Array(count), (item, value) => value + 1);
  };
  // 3.得到某年某月的 1号 是星期几，这里要注意的是 JS 的 API-getDay() 是从 [日-六](0-6)，返回 number
  const getWeekday = (year, month) => {
    let date = new Date(year, month, 1);
    return date.getDay();
  };
  // 4.得到上个月的天数
  const getPreMonthCount = (year, month) => {
    if (month === 0) {
      return getMonthCount(year - 1, 11);
    } else {
      return getMonthCount(year, month - 1);
    }
  };
  // 5.得到下个月的天数
  const getNextMonthCount = (year, month) => {
    if (month === 11) {
      return getMonthCount(year + 1, 0);
    } else {
      return getMonthCount(year, month + 1);
    }
  };
  // 工具方法 - end
  let weekStr = '日一二三四五六';
  weekArr = weekStr.split('').map(item => '星期' + item);
  // 插入星期 dom
  let weekDomStr = '';
  let oFragWeek = document.createDocumentFragment();
  weekArr.forEach(item => {
    let oSpan = document.createElement('span');
    let oText = document.createTextNode(item);
    oSpan.appendChild(oText);
    oSpan.classList.add('week-item');
    oFragWeek.appendChild(oSpan);
  });
  let weekWrap = document.getElementById('weekLine');
  weekWrap.appendChild(oFragWeek);

  // 这里得到咱们第一次的 数据 数组
  const updateCalendar = (year, month, day) => {
    if (typeof year === 'undefined' && typeof month === 'undefined' && typeof day === 'undefined') {
      let nowDate = new Date();
      year = nowDate.getFullYear();
      month = nowDate.getMonth();
      day = nowDate.getDate();
    }
    // 更新一下顶部的年月显示
    document.getElementById('nowYear').innerHTML = year;
    document.getElementById('nowMonth').innerHTML = month + 1;
    document.getElementById('nowDate').innerHTML = day;
    // 生成日历数据，上个月的 x 天 + 当月的 [28,29,30,31]天 + 下个月的 y 天 = 42
    let res = [];
    let currentMonth = getMonthCount(year, month);
    let preMonth = getPreMonthCount(year, month);
    let nextMonth = getNextMonthCount(year, month);
    let whereMonday = getWeekday(year, month);
    let preArr = preMonth.slice(-1 * whereMonday);
    let nextArr = nextMonth.slice(0, 42 - currentMonth.length - whereMonday);
    res = [].concat(preArr, currentMonth, nextArr);
    // 上面通过我本人的测试是没有什么问题，接下来就是更新 dom 的信息的问题
    let hadDom = document.getElementsByClassName('date-item');
    if (hadDom && hadDom.length) {
      let domArr = document.getElementsByClassName('date-item');
      for (let i = 0; i < domArr.length; i++) {
        domArr[i].innerHTML = res.shift();
      }
    } else {
      // 若是以前没有结构的话
      let str = '';
      for (let i = 0; i < 6; i++) {
        str += '<div class="date-line">';
        for (let j = 0; j < 7; j++) {
          str += `<span class='date-item'>${res.shift()}</span>`;
          if (j === 6) {
            str += '</div>';
          }
        }
      }
      document.getElementById('dateWrap').innerHTML = str;
    }
  };

  updateCalendar();
  // 添加上一月，下一月事件
  let oPreButton = document.getElementById('preMonth');
  let oNextButton = document.getElementById('nextMonth');
  oPreButton.addEventListener('click', function () {
    let currentYear = +document.getElementById('nowYear').textContent;
    let currentMonth = +document.getElementById('nowMonth').textContent - 1;
    let currentDate = +document.getElementById('nowDate').textContent;
    if (currentMonth === 0) {
      updateCalendar(currentYear - 1, 11, currentDate);
    } else {
      updateCalendar(currentYear, currentMonth - 1, currentDate);
    }
  });
  oNextButton.addEventListener('click', function () {
    let currentYear = +document.getElementById('nowYear').textContent;
    let currentMonth = +document.getElementById('nowMonth').textContent - 1;
    let currentDate = +document.getElementById('nowDate').textContent;
    if (currentMonth === 11) {
      updateCalendar(currentYear + 1, 0, currentDate);
    } else {
      updateCalendar(currentYear, currentMonth + 1, currentDate);
    }
  });
</script>
</html>

发现用 dom 直接操做而不是经过 mvvm 框架实现确实仍是比较蛋疼的，如下是此次实现的效果。

实现一个功能的时候，从数据的层面分析，有时候会比较容易理解app

原生JS实现日历

这周写本身的项目发现又用到日历了，加之本身毕业以后的第一个工做中遇到的任务也是须要写个日历(组员写了，我就不用写了)

首先，咱们看看 windows 的日历。发现总共有这么几个元素。先实现试试。

从数据的角度来分析日历的实现是比较简单的

分析完以后，让咱们跟着 新增/修改 一些代码。

发现用 dom 直接操做而不是经过 mvvm 框架实现确实仍是比较蛋疼的，如下是此次实现的效果。

分析完以后，让咱们跟着新增/修改一些代码。