利用avalon+原生js来制作日历空间(一)

(如果打开过慢,或者打不开,原因你懂得。)
一、思路
1、制作日历这种ui组件,我们第一步需要拿到的就是数据,我们需要知道例如今天属于,那一年、那一月、星期几。
2、数据的呈现形式应该是什么样子的,以我制作的这个为例,理性分析,以图为例,6X7的格子,我们要获得42个数据,其中当月数据占数组的中间,下月数据占数组的尾部,上月数据占数组的头部。
 
那么问题来了,如何判断上一个月的数据究竟需要多少天。
解决方法,判断,上一个月的最后一天是星期几,六月的上一个月五月的最后一天是星期天,这样我们就可以逆向用减减的方式,得到。如果上一月的最后一天是星期六,这样我们就需要6天,来填充数据。用这种方法来填充数据,是比较好看的方法。

 
将当月数据直接push进数组就好了。
下月数据,经过前两次数据的push,判断该数组的长度,来循环push下月的数据,这样一个日历的数据,我们就全部填充进了一个数组中,这个数据的长度的42。用一维数组循环输出是很麻烦的。
 
我们需要将这个一维数组,转换为二维数组,这样方便输出。用一维数组不是不可以,用的话,我们需要利用css来控制行数,这样我不喜欢,我喜欢的组件是,把css全部剥离,照样可以跑出效果。
 
利用一个嵌套循环就可以解决问题。外层为6,内层为7。
 





posted @ 2015-06-08 20:39  静文  阅读(...)  评论(...编辑  收藏