利用原生JavaScript实现造日历轮子实例代码-创新互联

前言

创新互联长期为上1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为澄江企业提供专业的网站制作、成都网站制作，澄江网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

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

So, Let's begin!

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

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

关于日历组件的实现思路

• 设置默认参数
• 检查节点参数是否传入，否则抛出错误
• 动态创建显示本日星期几的横轴
• 动态创建日历的日子
• 最后添加一点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: `

          
            
            日
          
        
`
      },
      days: {},
    }
    //赋值默认参数
    this.options = Object.assign({}, defaluteOptions, options);
    //轮番就调用函数动态创建dom
    this.checkOptions()._generateTime()._generateWeekDay()._generateCurrentDay();

网站栏目：利用原生JavaScript实现造日历轮子实例代码-创新互联
本文URL：http://cdkjz.cn/article/dcoidg.html