zoukankan      html  css  js  c++  java
  • 利用avalon+原生js来制作日历空间(一)

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

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





  • 相关阅读:
    webpack4配置详解之常用插件分享
    eslint 配置
    获取数组的随机数
    封装一个拖拽
    R语言常用语法和用法
    关于异或操作和它的算法题
    算法题:整形数组找a和b使得a+b=n
    最小生成树的一些证明
    python multiprocessing 使用
    python decorator的本质
  • 原文地址:https://www.cnblogs.com/Zjingwen/p/4561872.html
Copyright © 2011-2022 走看看