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
- js日历
- js日历
- JS 日历
- js日历
- JS日历
- JS日历
- js-日历
- js日历
- js 日历
- js日历
- JS日历
- js日历
- js日历
- js日历
- JS日历
- js日历
- 日历 js
- js 日历
- list.h
- html5获取地理位置和定位
- opencv,视频的操作
- 关于SQL 的with as 循环用法
- 改变文字大小
- JS 日历
- ubuntu16.10 docker 配置ngixn + php7 + mysql
- Nginx配置文件详解(nginx.conf)
- android集成谷歌地图
- Luban—— Android图片压缩工具
- 配置Keepalived实现Mysql双主高可用配置(完整配置)
- C++运算符重载
- mount共享目录后无法使用也无法卸载之解决方法记录
- java 第三方登录之QQ登录