JS 日历

xiaoxiao2021-02-28  104

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

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

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

日 一 二 三 四 五 六 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

占用行最多的情况

日 一 二 三 四 五 六 24 25 26 27 28 30 1 1之前的是上一个月的 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 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

转载请注明原文地址: https://www.6miu.com/read-82449.html

最新回复(0)