JS 日历

来源:互联网 发布:java认证考试一年几次 编辑:程序博客网 时间:2024/05/21 19:21

  因为业务需求需要一个日历面板,然后就摸索了,接下来我来分享一下简单日历的制作原理。
  
  首先,我们要知道的是一年里面的每个月的天数,很显然这个问题我记得小学的时候我们老师就讲过,提起左手握拳,然后数食指到小拇指之间的间隙,一月大、二月小、三月大、四月小、五月大、六月小、七月大、八月大、九月小、十月大、十一月小、12月大。
  
  通过这样的数数,我们可以得到一年中每个月的天数,当然二月除外。  

// 每一个月对应的天数var monthsDay = [31, ?, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

  很明显二月 = 是一个特殊的月份? 闰年 29 : 否则28 天。那么,这样我们就需要判断是否是闰年。闰年的算法就自己百度了,然后根据是否是闰年把?= 这个值填上去。
  
  接着,我们来洞察一下我们身边的日历,然后发了一些特殊现象,比如:
  
占用行最少的情况

日   一   二   三   四   五   六1    2    3   4    5    6   78    9   10  11   12    13  1415   16  17  18   19    20  2122   23  24  25   26    27  28

占用行最多的情况

日   一   二   三   四   五   六24   25  26  27   28    30  1           1之前的是上一个月的2     3   4    5    6   7   89    10  11   12    13  14  1516   17  18   19    20  21  2223   24  25   26    27  28  2930   31   1    2    3   4   5           31之后是下一个月的 

  这样分析之后我们很明确知道,一个月最多占用6行,所以我们在设计日历面板的时候就设计6行,多了补充下一个月的天数,这样就ok了。
  
  通过洞察之后,我还发下了一个问题,就是一个月的第一天可以出现在星期日也就是第一行的第一个,也可以是星期六也就是第一行的最后一个,当然,出现在第一行的任意位置都有可能。也就是说,只要我们确定了当前月份第一天是星期几,就可以把当前月份的第一天放下去,之后就通过我们首先中获取的每个月天数,依次放入表格中,同样的知道了当前月份,就知道上一个月是当前月减一还是跑回了上一年的12月,和下一个月是当前月加一还是下一年的1月,这样我们就把一个面板排好了。
  
获取当前月份的第一天是星期几

var date = new Date(2017, 6, 1);    // 指定年月日的日期对象// 然后各种百度,获取日期对象的方法。你肯定会有方法的// 星期中的某一天,使用本地时间。返回值是 0(周日) 到 6(周六) 之间的一个整数。var day = date.getDay();

  ok,经过以上次序,我们只要知道了年-月-日,就可以知道,上一月的天数、本月天数、下一月天数、本月第一天是星期几。有了这些要素,我们就可以通过一个循环,绘制出当月的面板,其它月份的面板只是多一个循环,然后其它年份,那就再来一个循环咯~~~~。
  下面是我的面板,参考下:
  这里写图片描述
  
  然后,实现什么左边滑一下,切换前一月,右边滑一下,切换下一月。然后还可以在每一个日期节点上添加点击事件,并在节点上绑定节点对应的年月日,这样可以选择日期了。

以下链接为实现,采用cocos2d-js,不能直接使用。

http://download.csdn.net/detail/u013791665/9864670