前端---实现一个简单的日历

其他 2021-02-14 14:28:29 阅读次数: 0

纯JS代码实现

<!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>Calendar</title>
  <style>
    .calendar-container {
      padding: 30px;
      width: 576px;
    }

    .date-container {
      text-align: center;
      height: 50px;
      line-height: 50px;
    }

    /*上一月下一月按钮*/
    #preMonth,#nextMonth {
      position: relative;
    }
    #preMonth:after {
      content: '<';
      position: absolute;
      left: -28px;
      top: -1px;
      width: 24px;
      text-align: center;
      line-height: 24px;
      border-radius: 21px;
      background-color:brown;
      color: white;
    }
    #nextMonth:after {
      content: '>';
      position: absolute;
      left: 4px;
      top: -1px;
      width: 24px;
      text-align: center;
      line-height: 24px;
      border-radius: 21px;
      background-color:brown;
      color: white;
    }
    #nowYear,#nowMonth,#nowDate{
      padding: 0 5px;
    }


    .week-item {
      display: inline-block;
      width: 80px;
      height: 60px;
      line-height: 60px;
      border: 1px solid #EEEEEE;
      text-align: center;
    }

    .date-item {
      display: inline-block;
      width: 80px;
      line-height: 80px;
      border: 1px solid #EEEEEE;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="calendar-container">
    <div class="date-container">
      <span id="preMonth" class="year-prev"></span>
      <span id="nowYear" class="year-now"></span>
      <span id="nowMonth"></span>
      <span id="nowDate"></span>
      <span id="nextMonth" class="year-next"></span>
    </div>
    <div id="weekLine" class="week-line"></div>
    <div id="dateWrap" class="date-wrap"></div>
  </div>
</body>

</html>
<script>
  // 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（平年的2月）或者29（闰年的2月）或者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);
    if (whereMonday === 0) {
      whereMonday = 7
    }
    // 这里当 whereMonday 为 0 的时候会截取上月的所有数据
    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 < 5; 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>

使用了Jquery

<!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>Calendar</title>
  <style>
    .calendar-container {
      padding: 30px;
      width: 576px;
    }

    .date-container {
      text-align: center;
      height: 50px;
      line-height: 50px;
    }

    /*上一月下一月按钮*/
    #preMonth,#nextMonth {
      position: relative;
    }
    #preMonth:after {
      content: '<';
      position: absolute;
      left: -28px;
      top: -1px;
      width: 24px;
      text-align: center;
      line-height: 24px;
      border-radius: 21px;
      background-color:brown;
      color: white;
    }
    #nextMonth:after {
      content: '>';
      position: absolute;
      left: 4px;
      top: -1px;
      width: 24px;
      text-align: center;
      line-height: 24px;
      border-radius: 21px;
      background-color:brown;
      color: white;
    }
    #nowYear,#nowMonth,#nowDate{
      padding: 0 5px;
    }


    .week-item {
      display: inline-block;
      width: 80px;
      height: 60px;
      line-height: 60px;
      border: 1px solid #EEEEEE;
      text-align: center;
    }

    .date-item {
      display: inline-block;
      width: 80px;
      line-height: 80px;
      border: 1px solid #EEEEEE;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="calendar-container">
    <div class="date-container">
      <span id="preMonth" class="year-prev"></span>
      <span id="nowYear" class="year-now"></span>
      <span id="nowMonth"></span>
      <span id="nowDate"></span>
      <span id="nextMonth" class="year-next"></span>
    </div>
    <div id="weekLine" class="week-line"></div>
    <div id="dateWrap" class="date-wrap"></div>
  </div>
</body>

</html>
<!--JQuery-->
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

<script>
  /**
    * 1.判断平年闰年[四年一闰，百年不闰，四百年再闰]
    */
  function isLeapYear(year) {
    return (year % 400 === 0) || (year % 100 !== 0 && year % 4 === 0);
  }


  /**
    * 2.获得每个月有几天，注意 month是[0-11]
    */
  function 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
    */
  function getWeekday(year, month) {
    let date = new Date(year, month, 1);
    return date.getDay();
  }

  /**
    * 4.获得上个月的天数
    */
  function getPreMonthCount(year, month) {
    if (month === 0) {
      return getMonthCount(year - 1, 11);
    } else {
      return getMonthCount(year, month - 1);
    }
  }



  /**
   * 5.获得下个月的天数
   */
  function 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（平年的2月）或者29（闰年的2月）或者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);
    if (whereMonday === 0) {
      whereMonday = 7
    }
    // 这里当 whereMonday 为 0 的时候会截取上月的所有数据
    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 < 5; 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();


  // 点击上一月
  $('#preMonth').click(function () {
    let currentYear = $('#nowYear').html();         //年
    let currentMonth = $('#nowMonth').html() - 1;   //月
    let currentDate = document.getElementById('nowDate').textContent;
    if (currentMonth === 0) {
      updateCalendar(currentYear - 1, 11, currentDate);
    } else {
      updateCalendar(currentYear, currentMonth - 1, currentDate);
    }
  });

  // 点击下一月
  $('#nextMonth').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>

猜你喜欢

转载自blog.csdn.net/qq_39115469/article/details/106864080
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022