Flex布局 H5+JS+CSS实现日历

最新推荐文章于 2024-03-19 20:40:53 发布

Galadyal鸭

最新推荐文章于 2024-03-19 20:40:53 发布

阅读量839

点赞数

CC 4.0 BY-SA版权

分类专栏： flex H5 文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/weixin_51092099/article/details/124461684

原创的日历

基本思路如下（尚未编写样式）：
1.先写一个静态的html页面，将日历中的天数写死，为1-28天
2.然后用flex完成基本的页面布局
3.获取当前的年月日，并在1980年1月1日为星期一作为基础下，获取指定年月的1号为星期几
4.在1号格子前添加新的格子，以此方式把1号移到所属的星期下
5.根据月份(注意闰年)在末尾28号所属的格子后再添加新的号数
6.切换月份的时候，先用方法使4,5步骤所添加的格子消失，再重复4,5步骤就实现了日历的切换

效果图如下(尚未写样式):

在这里插入图片描述

代码如下:

Document

<< /span> >

    <div class="week">
        <span>周一</span>
        <span>周二</span>
        <span>周三</span>
        <span>周四</span>
        <span>周五</span>
        <span>周六</span>
        <span>周日</span>
    </div>

    <div class="main" id="main">
        <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span>&