HTML5与CSS3如何显示一个日历的布局? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

HTML5与CSS3如何显示一个日历的布局?

杨冬芳 2016-06-13 13:44:58 2234

1.要布局达到这个效果,不知道如何布局,唯一的思路是用”table“布局。

                                                                           ![screenshot](https://oss-cn-hangzhou.aliyuncs.com/yqfiles/431554018b3b71d4644043e94088329b3dbe9a42.png)

2.谁有类似的源代码或者链接,求给一份。

html显示 html5显示 .html显示 css显示
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:35:45

    之前做过一个日历,没有用table,用的是div浮动。关键在于二月份的天数:

    function getFebruary(year) {
    //返回二月天数

    return (year%100==0) ? (year%400==0?29:28) : (year%4==0?29:28);

    }
    //当前年份下每月的天数
    var monthL = [31,getFebruary(curYear),31,30,31,30,31,31,30,31,30,31];

    获取当前年份当前月份第一天的星期。比如这个月第一天是星期四,这个月有31天,使用div,div加样式float: left;,使用循环先排出4天,div(星期日、一、二、三)里面不填数字,因为这个月第一天是星期四。然后再使用循环在div里填出1-31日。

    设置好每个div和日历总的宽度,每一行排满以后它会自动排第二行。如果用table,还需要计算每个月的日历有多少行,反而更加繁琐。

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

相似问题
最新问题
推荐课程