用原生JavaScript实现创建日历轮的示例代码

前言

在日常开发中，大部分都是和框架打交道。随着时间的推移，他们忘记了原生JS的感觉。个人觉得原生JS的基础还是很重要的，所以最近利用业余时间做了一个轮子。虽然我这个级别做的轮子质量不可靠，但是我觉得练手还是不错的。哈哈！

那么，让我们开始吧！

github.com/Zero-jian/p…

下面是日历的外观，有点难看又特别，重点是JS，嘻嘻！

浅谈日历组件的实现

设置默认参数以检查节点参数是否被传入，否则，抛出一个错误并动态创建一个显示星期几的水平轴。最后，添加一点dom操作，先看看构造函数的内容

构造函数(选项){ let default options={ element : null。//这是第3360周1的节点开始，字符串3360 { week :n={ let map={ 0: ' Sunday }。1: '星期一'，2: '星期二'，3: '星期三'，4: '星期四'，5: '星期五'，6: '星期六'，}返回地图[n]；}，template day : ` Li class=' current month ' span class=' day label ' span class=' day '/span span class=' unit ' day/span/span/Li `}，days: { }，}//为此分配默认参数。选项=对象。assign ({}，defaultoptions，options)；//调用函数动态创建domthis。checkoptions()。_ generatetime()。_ generateweekday()。_ generate current day()；设置数值，赋值默认参数，调用方法动态创建dom在初始化Calendar类对象的创建时，相信朋友们理解这段代码没有压力。

我一直在ES6里写这个轮子。毕竟程序员还是要跟上潮流的！

分配参数后，依次调用函数。首先，调用**this.checkOptions()**方法来检查节点是否存在

CheckOptions() {//如果节点不存在，则在(！idspnonenote)中引发错误。this.options.element) {抛出新的Error('element为request ')；}退回这个；}下一步是获取当天的日期

毕竟是日历，所以获取当前的年、月、日作为参考非常重要

_generateTime() {让数据=新日期()；//time让year=this . options . days . year=data . getfull year()；//year让month=this . options . days . month=data . getmonth()1；//月让日=this . options . days . day=data . getdate()；//day this . options . days . count day=0；//日历总天数为7 * 6=42天。选项。几天。nomonth=数据。get month()1；//同月本。options . days . noyear=data . getfull year()；//同年归还此物；}创建一周的横轴

_ generateWeekDay(){ let { startOfWeek，strings }=this.optionslet calendar=document . queryselector('。日历')；let ol=DOM . create(` ol class=' weekdays '/ol `)；calendar . appendchild(ol)；让weekIndex=this.createArray(7，startOfWeek)。map((day，I)={ let Li=DOM . create(` Li $ { strings . week(I)}/Li `)；//判断是否是今天的ol . appendchild(Li)；});归还这个；}dom.create是一个封装的方法，可以通过传入模板来创建和返回

This.createArray()也是一个封装的方法。这个函数是创建一个长度为7的数组。为什么长度是7？因为从周一到周日的长度是7，那么开始使用地图映射和遍历来创建节点，并将它们添加到document.body！

嗯嗯，到了这里，会创建一周的横轴，然后关键的部分就是创建一周的日日历。其实我只是需要掌握逻辑，但是因为我是菜鸡，写的时候也有一些漏洞，所以，哈哈，就参考我写的代码吧！

接下来是重点，也就是创作日期

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

话不多说，贴上代码

//创建当前月份日子_ generate current day(){ let date=this。选项。天数；让日历=文档。queryselector(' .日历');让ol=DOM。create(` ol class=' days '/ol `)；让getWeek=这个. getweekweekweekweek(日期。年，日期。月-1，日期。日)；//星期几让getMonth=这个_getMonth(date.year，date.month) //月份天数让getMonthDay=这个. GetWeekday()；//几号约会。计日=0；date.countDay=getMonthcalendar。appendchild(ol)；//创建当月日子模块让dayIndex=this.createArray(42，this.options.startOfWeek).地图((天，我)={让李=DOM。创建(这个。选项。琴弦。TemplateDay)；让跨度=李。queryselector('。日期标签。day’)；//判断日历起止，对本月日子进行赋值if(I=getWeek I=(getMonth getWeek)){ span。text content=I-GetWeek；} //判断是否为今天if(I==(getMonthDay getWeek)日期。nomonth==日期。月份日期。noyear==date。年){李。班级名单。添加('今日')；} ol。阑尾(李)；});文件。queryselector(' h1。日期').appendChild(DOM。create(` p data-role=' time ' $ { date。年份}-$ {日期。月}-$ {日期。day }/p `)；这个_ _ generatepresevmonth()._ generateNextMonth()；}创建当前月份日子的逻辑就是首先就是创建一个长度为42的数组，因为6*7=42,数组下标为0至42,然后获取当月的天数以及当月一号时候是星期几，通过计算获取本月天数的下标范围，然后通过循环进行赋值，这样就创建了日历本月的天数

然后是创建上个月的天数

按照惯例，贴上代码

_ generateproevemonth(){让date=this。选项。天数；让年份=日期。年份让月=日期。月让beginWeek=这个_ getweekweekweek(年，月-1,1);//本月开始星期让countMonth=这个_getMonth(年，月-1);//上月月份天数让李=文书。queryselectorall('。日期标签。day’)；beginWeek==0？开始周=7 : " "；//如果月份开头为星期日，会出臭虫，这是防止date . countday=begin weekthis . createarray(begin week，this.options.startOfWeek).map((day，i)={ if(ibeginWeek) { //上月总天数-本月开始星期几1 i li[i].文字内容=计月-开始第1 I周；} });归还这个；}创建上月的日子，首先获取本月一号是星期几，比如是星期三就可以知道前面空的数字分别为星期日、星期一和星期二，上月的天数能占三个位置，所以就创建一个长度为3的数组，然后计算上月的天数，然后通过逻辑判断进行赋值，就是如此~~~

最后就是下一个月的天数

代码代码代码

//创建下个月日子_ generate nextmonth(){让date=this。选项。天数；让年份=日期。年份让月=日期。月让beginWeek=这个_ getweekweekweek(年、月、1);//开始星期让countMonth=这个_ getMonth(年，月一日);//下月月份天数让李=文书。queryselectorall('。日期标签。day’)；//data.countDay统计了上月和本月的日子数总量，直接减去即可这个。createarray(42天。countday，this.options.startOfWeek).地图((日，i)={ li[date.countDay i].文字内容=I 1；});}这个逻辑比较简单，就是用(6*7=42)42减去上月天数和本月天数，剩下的位置为显示下个月的天数，所以就是这样子！

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

//dom.create()调用让DOM={ create(html){让模板=文档。创建元素(“模板”)；template.innerHTML=html返回模板。内容。第一个孩子；}} //this.createArray()调用//创建数组节点createArray(长度，填充){让array=Array.apply(null，{ length: length }).map(()=fill)；返回数组；}动作切换部分

在这里，切换日期相对简单。我直接贴代码，你一看就明白了

//上个月(){//this . options . days . month-=1；this . change month(' prev ')；}//下月(){//this . options . days . month=1；this . change month(' next ')；}//回到今天的重置月(){//这个。_ generate time()；this . change month(' default ')；}//包月DOM更改月(状态){ let date=this . options . days；switch(status){ case ' prev ' : {-date . month 1？日期。年份-？date.month=12 : ' ' :打破；}案例“下一个”: { date.month 12？日期。年份？date.month=1 : ' ' :打破；}案例“default”: { this。_ generate time()；打破；} }//移除此节点。_ generate calendar()；//将节点添加到此。_generateCurrentDay()再次；}嗯嗯，整个日历组件大概是这样的。当整个过程写下来的时候，感觉自己的思维有所提升，但其实我觉得这个轮码还是可以重新包装完善的，呵呵~ ~

滚轮功能比较简单，剩下的功能就等着朋友们自由发挥了~ ~

好吧，第一次写文章，熬夜了。我突然得到灵感，拒绝睡觉。呵呵，明天上班一定要打瞌睡，呵呵~ ~ ~

我是小白，工作快一年了，如果代码有错误，请指出来，嗯嗯，完成~ ~

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。