前言说起这个时间选择控件，网上的时间选择控件种类繁多。相信很多同学都用过，所以大家对这个都不陌生。虽然这个时间选择控件大家都用过，但是很少有人研究过其中的原理。最近利用业余时间自己写了一个时间选择控件，用这个时间选择控件给同学们讲解一下这个时间选择控件的原理。我给大家演示一下肯定是比较简单的，也比较容易理解的。不过考虑到实用性，我对这个时间选择控件进行了改进，变成了一个移动端的时间选择控件。希望大家喜欢我的文章，请给我一个赞！非常感谢！项目演示本文项目地址https://github.com/ruichengpi...本文演示地址https://ruichengping.github.i...本文效果图------------------分向線----------------------完整项目地址（手机端）github地址https://github.com/ruichengpi...Demo地址https://ruichengping.github.i...想想基于以上效果演示图，我们首先要做的是理清思路。很多同学一开始这样做可能会手足无措，不知道从何下手。下面我就给大家解释一下。对于这类插件的开发，个人建议先不要急于考虑其封装等情况，先从最简单的开始吧。那么什么是最简单的呢？那肯定是html+css+js最简单的模式了。这意味着什么？这里说明一下，现在只是简单的一个效果，html控制骨架，css美化样式，js实现交互，不考虑复用性。由于我们先选择html+css+js实现效果，然后开始写出时间选择控件的htmldom结构，然后使用css调整样式。html和css的内容都很简单，这里就不贴代码了。同学们看完这篇文章可以去我github项目下Jcalendar下的learn文件夹查看。先说说什么是交互。JS交互的实现关于这个JS交互，首先要搞清楚这次选择控件有哪些交互。我先列一下：根据输入框的位置设置年月的增减按钮，根据年月设置时间选择器的位置获取对应的日期数据。根据年月获取对应的日期数据先来说明一下这个功能是如何实现的。这是整个时间选择控件的基石。明白了这一点，后面的问题就会变得容易了。第一次看到这一点真的很难。我很困惑，不知道如何开始。遇到这种问题的时候，不要想着怎么去实现。首先，让我们弄清楚日期数据由哪些部分组成。仔细想了想，发现每一组日期数据都有这样一个方程。日期数据=上个月的日期+本月的日期+下个月的日期，那为什么要这样组成呢？可能会有同学有这样的疑问，别着急，下面小编为大家讲解一下。一周有7天，我们最长的一个月有31天，也就是四个星期零三天。如果每行代表星期几，那么五行就可以了。但是看效果演示图，可以看到我们用了6行。为什么要多出一行？这个问题很好解释，不是每个月的第一天都是星期天开始的，所以我们要考虑最坏的情况。如果从星期六开始，此时需要6+31=37个格子（换了的话，5行多了2个格子）。为了满足这种最坏的情况，我们需要6行。通过上面的解释，我们可以发现有一个特例是不满足这个方程的。即每月的第一天从星期日开始。不过这种特例并不影响我们用这种思维方式来思考问题，所以我们可以忽略这种特例。下面我来看一下每一条数据是如何得到的。关于上个月这条数据的推导，先不考虑它的具体构成。首先要考虑的是数量，我们需要为它弄几个。你怎么知道你需要多少？就像弄清楚该月的第一天是星期几一样简单。/***获取currentYear年份中currentMonth的第一天是星期几*month参数比实际少一天*0代表星期日，6代表星期六**/newDate(currentYear,currentMonth-1,1).getDay();在我弄清楚我需要上个月的几个日期数据之后，我们还需要一件事。也就是上个月的最后一天，照这个往前推。/***获取currentYear年currentMonth月份最后一天的日期*月份参数比实际日期少一天**/newDate(currentYear,currentMonth-1,0).getDate();这个月的日期数据比前面简单很多，只需要知道这个月的第一天和最后一天。//获取currentYear年currentMonth月份第一天的日期newDate(currentYear,currentMonth-1,1).getDate();//获取currentYear年currentMonth月份最后一天的日期新日期（当前年，当前月，0）.getDate（）；下个月的数据也很简单，一共7*6=42个单元格，把剩下的单元格填上。我们只需要知道下个月的第一天是几号。//获取currentYear年currentMonth月份下一个月的日期newDate(currentYear,currentMonth,1).getDate();最终JS代码//根据年月获取日数组functiongetMonthData(year,month,day){vardays=[];vartoday=newDate();如果(!year|!month|!day){year=today.getFullYear();月=今天.getMonth()+1;日=今天。获取日期（）；}//获取当月第一天的Date对象varfirstDateObj=newDate(year,month-1,1);//获取该月第一天对应的星期几varfirstDateWeekDay=firstDateObj.getDay();//获取当月最后一天的Date对象varlastDateObj=newDate(year,month,0);//获取当月最后一天的日期varlastDate=lastDateObj.getDate();//获取上个月的最后一天A天的Date对象varlastDateOfPrevMonthObj=newDate(year,month-1,0);//获取上个月最后一天的日期varlastDateOfPrevMonth=lastDateOfPrevMonthObj.getDate();//上个月for(vari=0;i
