利用原生JavaScript实现造日历轮子实例代码


Posted in Javascript onMay 08, 2019

前言

在日常开发中,大多数都是在和框架打交道,久而久之便遗忘了原生JS的感觉,个人感觉中原生JS基础还是很重要的,所以最近就利用了空余时间造一个轮子出来,虽然以我的水平造出来的轮子质量还是不太可靠的,但是我觉得用来练练手还是不错的,哈哈!!

So, Let's begin!

github:github.com/Zero-jian/p…

以下是日历的样子,是有点难看,讲究讲究,重点在于JS部分,嘻嘻!!!

利用原生JavaScript实现造日历轮子实例代码

关于日历组件的实现思路

  • 设置默认参数
  • 检查节点参数是否传入,否则抛出错误
  • 动态创建显示本日星期几的横轴
  • 动态创建日历的日子
  • 最后添加一点dom动作就好

先来看看构造函数内容

constructor(options) {
    let defaluteOptions = {
      element: null, //这是节点
      startOfWeek: 1,
      strings: {
        week: n => {
          let map = {
            0: '周日',
            1: '周一',
            2: '周二',
            3: '周三',
            4: '周四',
            5: '周五',
            6: '周六',
          }
          return map[n];
        },
        templateDay: `<li class="currentMonth">
          <span class="dayLabel">
            <span class="day"></span>
            <span class="unit">日</span>
          </span>
        </li>`
      },
      days: {},
    }
    //赋值默认参数
    this.options = Object.assign({}, defaluteOptions, options);
    //轮番就调用函数动态创建dom
    this.checkOptions()._generateTime()._generateWeekDay()._generateCurrentDay();

初始化创建Calendar类对象的时候设置数值,赋值默认参数以及调用方法来动态创建dom,相信小伙伴们看懂这段代码没压力。

该轮子我全程都是用ES6写的,毕竟程序员还是要跟上潮流的!!

赋值参数后开始轮番调用函数,首先调用的是**this.checkOptions()**方法,检查节点是否存在

checkOptions() {
    //如果节点不存在直接抛出错误
    if (!this.options.element) {
      throw new Error('element is request');
    }
    return this;
  }

接下来就是获取当天的年月日

毕竟是日历,获取当前的年月日当参考还是很重要的

_generateTime() {
    let data = new Date(); //时间
    let year = this.options.days.year = data.getFullYear(); //年份
    let month = this.options.days.month = data.getMonth() + 1; //月份
    let day = this.options.days.day = data.getDate(); //日子
    this.options.days.countDay = 0; //日历总日子数为7*6=42
    this.options.days.noMonth = data.getMonth() + 1; //不变的月份
    this.options.days.noYear = data.getFullYear(); //不变的年份
    return this;
  }

创建星期横轴

_generateWeekDay() {
    let {
      startOfWeek,
      strings
    } = this.options;
    let calendar = document.querySelector('.calendar');
    let ol = dom.create(`<ol class="weekdays"></ol>`);
    calendar.appendChild(ol);
    let weekIndex = this.createArray(7, startOfWeek).map((day, i) => {
      let li = dom.create(`<li>${strings.week(i)}</li>`);
      //判断是否为今天
      ol.appendChild(li);
    });
    return this;
  }

dom.create是封装好的方法,传入模板即可创建并返回回来

this.createArray()也是封装好的方法,本函数是创建一个长度为7的数组,为什么长度为7?因为周一到周日的长度为7啊,然后开始使用map映射和遍历来创建节点并添加document.body里面!!!

唔唔唔,去到这里,星期横轴就创建好了,接下来是重点部分了,就是创建对于的星期的日子日历,其实只要掌握逻辑就好了,不过因为我是菜鸡,写的时候也有点掉坑,所以,哈哈,你们对我写的代码参考参考就好了!!

接下来是重点了,就是创建日子

创建日历日子分为三个部分,第一部分是上个月的日子,第二是本月的日子,第三部分是下个月的日子,三个部分所以把它们分别封装起来,??相互影响!!

话不多说,贴上代码

//创建当前月份日子
  _generateCurrentDay() {
    let date = this.options.days;
    let calendar = document.querySelector('.calendar');
    let ol = dom.create(`<ol class="days"></ol>`);
    let getWeek = this._getWeekWeek(date.year, date.month-1, date.day); //星期几
    let getMonth = this._getMonth(date.year, date.month) //月份天数
    let getMonthDay = this._getWeekDay(); //几号
    date.countDay = 0;
    date.countDay += getMonth;
    calendar.appendChild(ol);
    //创建当月日子模块
    let dayIndex = this.createArray(42, this.options.startOfWeek).map((day, i) => {
      let li = dom.create(this.options.strings.templateDay);
      let span = li.querySelector('.dayLabel>.day');
      //判断日历起止,对本月日子进行赋值
      if (i >= getWeek && i <= (getMonth + getWeek)) {
        span.textContent = i - getWeek;
      }

      //判断是否为今天
      if (i == (getMonthDay + getWeek) && date.noMonth == date.month && date.noYear == date.year) {
        li.classList.add('today');
      }
      ol.appendChild(li);
    });
    document.querySelector('h1.date').appendChild(dom.create(`<p data-role="time">${date.year}-${date.month}-${date.day}</p>`));
    this._generatePrevMonth()._generateNextMonth();

  }

创建当前月份日子的逻辑就是首先就是创建一个长度为42的数组,因为6*7=42,数组下标为0至42,然后获取当月的天数以及当月一号时候是星期几,通过计算获取本月天数的下标范围,然后通过循环进行赋值,这样就创建了日历本月的天数

然后是创建上个月的天数

按照惯例,贴上代码

_generatePrevMonth() {
    let date = this.options.days;
    let year = date.year;
    let month = date.month;
    let beginWeek = this._getWeekWeek(year,month-1,1);//本月开始星期
    let countMonth = this._getMonth(year,month-1);//上月月份天数
    let li = document.querySelectorAll('.dayLabel>.day');
    beginWeek == 0 ? beginWeek+= 7 : ''; //如果月份开头为星期日,会出bug,这是防止
    date.countDay += beginWeek;
    this.createArray(beginWeek,this.options.startOfWeek).map((day,i)=>{
      if(i<beginWeek) {
        //上月总天数-本月开始星期几+1+i
        li[i].textContent = countMonth - beginWeek + 1 + i;
      }
    }); 
    return this;
  }

创建上月的日子,首先获取本月一号是星期几,比如是星期三就可以知道前面空的数字分别为星期日、星期一和星期二,上月的天数能占三个位置,所以就创建一个长度为3的数组,然后计算上月的天数,然后通过逻辑判断进行赋值,就是如此~~~

最后就是下一个月的天数

代码 代码 代码

//创建下个月日子
_generateNextMonth() {
    let date = this.options.days;
    let year = date.year;
    let month = date.month;
    let beginWeek = this._getWeekWeek(year,month,1);//开始星期
    let countMonth = this._getMonth(year,month+1);//下月月份天数
    let li = document.querySelectorAll('.dayLabel>.day');
    //data.countDay统计了上月和本月的日子数总量,直接减去即可
    this.createArray(42-date.countDay , this.options.startOfWeek).map((day,i)=>{
      li[date.countDay+i].textContent = i+1;
    });
  }

这个逻辑比较简单,就是用(6*7=42)42减去上月天数和本月天数,剩下的位置为显示下个月的天数,所以就是这样子!!!

把封装好的代码也弄出来吧~~

//dom.create()调用
let dom = {
  create(html) {
    let template = document.createElement('template');
    template.innerHTML = html;
    return template.content.firstChild;
  }
}
//this.createArray()调用
  //创建数组节点
  createArray(length, fill) {
    let array = Array.apply(null, {
      length: length
    }).map(() => fill);
    return array;
  }

动作切换部分

切换日子这里相对来说就是比较简单,我直接贴代码,你们一看就懂了

//上一个月
  previousMonth() {
    // this.options.days.month -= 1;
    this.changeMonth('prev');
  }

  //下一个月
  nextMonth() {
    // this.options.days.month += 1;
    this.changeMonth('next');
  }

  //回到今天
  resetMonth() {
    // this._generateTime();
    this.changeMonth('defalut');
  }

  //封装月份dom
  changeMonth(status) {
    let date = this.options.days;
    switch(status) {
      case 'prev': {
        --date.month < 1 ? date.year-- ? date.month = 12 : '' : '';
        break;
      }

      case 'next': {
        ++date.month > 12 ? date.year++ ? date.month = 1 : '' : '';
        break;
      }

      case 'defalut': {
        this._generateTime();
        break;
      }
    }
    //移除节点
    this._generateCalendar();
    //重新添加节点
    this._generateCurrentDay();
  }

唔唔唔,整个日历组件下来大概就是这样子,整个流程写下来感觉自己的思维还是有所进步的,但是其实我觉得这个轮子代码还是可以再封装封装和完善的,嘻嘻~~

轮子功能比较简单,所以剩下的功能就等待小伙伴们自由发挥了~~

好了,第一次写文章,熬夜写的,突然就有灵感了,不肯睡觉,呵呵,,明天上班肯定是要打瞌睡了,呵呵~~~

本人是小白,从业将近一年,所以代码上有什么错误,请各位大神能够指出指出,嗯嗯,完~~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
js面向对象的写法
Feb 19 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
JS使用new操作符创建对象的方法分析
May 30 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 #Javascript
vue实现菜单切换功能
May 08 #Javascript
浅谈JS的原型和继承
May 08 #Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 #Javascript
微信小程序封装自定义弹窗的实现代码
May 08 #Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 #Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 #Javascript
You might like
解析PHP无限级分类方法及代码
2013/06/21 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
phpinfo的知识点总结
2019/10/10 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
js获取视频时长代码
2014/04/10 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
javascript常用的方法分享
2015/07/01 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
python批量同步web服务器代码核心程序
2014/09/01 Python
python GUI实例学习
2017/11/21 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
python自动生成sql语句的脚本
2021/02/24 Python
精神文明建设标语
2014/06/16 职场文书
社区活动总结
2015/02/04 职场文书
员工手册董事长致辞
2015/07/29 职场文书
解除合同协议书范本
2016/03/21 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers