js实现日历

2024-10-01 23:14:01

这周写自己的项目发现又用到日历了，加之自己毕业之后的第一个工作中遇到的任务也是需要写个日历(组员写了，我就不用写了)
今天就来好好折腾一下日历是怎么写的。

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

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

从数据的角度来分析日历的实现是比较简单的
1.我们需要显示一个当前时间的结构 - new Date()
2.我们需要显示当月的信息 - [星期(周一~周日)，日期(1-[28,29,30,31])]
其中我们只要知道了每个月的 1日是星期几，就能很容易地摆放后面的日子(万事开头难)。

我们最多需要 6 行来显示我们的日期，因为要第一排如果只包含本月的一天 6(上个月的) + (1 + 4*7)，这样就五行了，当月天数若大于 29，就显示不下了
确定了 6 行之后，我们发现我们可能需要获取上个月，和下个月多出来的几天的摆放位置。
不同年份的不同月的 2月份，我们知道它的日期是不同的，所以我们还需要判断平年还是闰年。

3.显示上个月，下个月的切换。我们发现需要有个函数来帮我们更新日历。

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

<!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（平年的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
  }
  // 感谢网友 luoyiming 的测试（哈哈！谢谢！）：这里当 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 < 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 框架实现确实还是比较蛋疼的，以下是这次实现的效果。

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

以上就是js实现日历的详细内容，更多关于js 日历的资料请关注我们其它相关文章！

js实现简单的日历显示效果函数示例

本文实例讲述了js实现简单的日历显示效果函数.分享给大家供大家参考,具体如下: 用一个函数简单的实现一个月份的日历,效果如下: 这个日历效果有高亮显示,我实现的思维比较简单. 我把上面的日历效果用表格table生成,分成两个部分. 第一个部分:就是前面的第一排,我用一行<tr></tr>显示,这一部分表示的上个月份留下来的日期和这个月份的日期的混合日期: 第二部分:就是剩下的所有排,这里我用五行<tr></tr>显示,这一部分表示的是这个月份和下个月份的日期
JavaScript实现简单日历效果

本文实例为大家分享了JavaScript实现简单日历效果的具体代码,供大家参考,具体内容如下实现效果: 根据所选择的年月,列出当月对应是周几,效果图如下: 实现思路: 1.使用select标签保存年月的所选菜单.使用table标签保存当月天数,表头为固定的周日周一等. 2.使用option对象,给年月循环赋值. 3.将每月的天数保存到数组中,根据所选的年月获取当月的天数,以及当月一号对应周几,对应周几就在第一行先打印几个空格,然后从一号开始依次打印当月天数. 4.刷新年月时,清除上次表格中(除
原生JS实现相邻月份日历

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-
原生js实现日历效果

本文实例为大家分享了js实现日历效果的具体代码,供大家参考,具体内容如下 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met
javascript实现考勤日历功能

简介用过一些开源的日历,但对于自定义去绑定数据在日历元素中却不是很方便,由于工作需要用到考勤日历,考虑到日历的实现也不是特别麻烦,于是自己弄了一个,样式比较简单,需要的可以自己去扩展.使用的时候绑定获取数据的方法即可,在这个日历中我没有直接添加选择月份.各位有兴趣可以自己扩展,已预留设置日期的方法.自定义去扩展的时候注意保证原有的代码结构不变,增加一些方法即可,下面直接上源码了,就三个文件. attendanceCalendar.js 代码已更新多次,请直接上github下载,链接修复第一
原生JS实现日历组件的示例代码

想要实现的效果点击日期选择框出现日历有个日期控制栏帮助选择日期, 包括年.月.日的选择和今天日历格子,初次点击日期选择框时显示此刻的日期,日历格子的日期应该包括这个月的所有天数,同时如果当月的1号不是周日,还应补全从周日到1号的天数.还要在这个月最后1号的后面补全到周六. 日期控制栏和日历格子的日期还有选择框里的日期的变化要是同步的. 实现思路为了组件的可复用性,需要用面向对象的思想. 每个日历组件都是一个日历对象,主要包括日期选择框,日期控制显示栏,还有日历格子,为了保持日期控制显示栏
基于javascript实现日历功能原理及代码实例

日历在学习javascript过程中,菜鸟教程有一个javascript实例---css日历,感觉挺有趣的,在它的基础上增加了一些简单的功能(差点哭辽). 功能按照传统日历方式显示该月的每一天. 可以突出显示今天的日期可以翻阅上一个月和下一个月的日历实现 step1 传统日历布局样式:分别将年份与月份.星期.该月的全部天数采用列表布局,排列组成传统日历的样式. step2 初始化和更新月份:先将列表清空(debug过程中,有一个发现,初始化的列表便存在的一个childNodes,该项目中
原生JavaScript实现日历功能代码实例(无引用Jq)

这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下成品显示,可左右切换月份 html 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi
如何通过JS实现日历简单算法

最近有用到日历可需要编辑文本的日历,为了绑定数据的方便,所以用js写了一套日历,其实思想也是很简单.实现步骤如下: 1.首先取得处理月的总天数 js不提供此参数,我们需要计算.考虑到闰年问题会影响二月份的天数,我们先编写一个判断闰年的自编函数: function is_leap(year) { return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0)); } 2.接着定义一个包含十二个月在内的月份总天数的数组: m_days=ne
JS实现简单日历特效

本文实例为大家分享了JS实现简单日历特效的具体代码,供大家参考,具体内容如下知识点 1.引入我的工具包 2.运用JavaScript内置对象 Date 运行效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; pa
JS实现带阴历的日历功能详解

本文实例讲述了JS实现带阴历的日历功能.分享给大家供大家参考,具体如下: 工作中要写一个带阴历的日历,自己调研了怎么做日历. 一.表格行数问题既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解决行数问题之前,还得先知道这个月的第1天是星期几,因为每个月的1号并不都是从日历上的星期天开始排的,可能1号是星期五,星期六也说不定,所以1号的左边部分,就得用空表格代替了.那么用多少个空表格代替呢,这里就得用到getDay(

js实现日历

相关推荐

随机推荐