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

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

1.要布局达到这个效果,不知道如何布局,唯一的思路是用”table“布局。
2.谁有类似的源代码或者链接,求给一份。


刚好最近也写了一个日期选择组件,看这里


http://www.bootcss.com/p/bootstrap-datetimepicker/


之前做过一个日历,没有用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天,使用divdiv加样式float: left;,使用循环先排出4天,div(星期日、一、二、三)里面不填数字,因为这个月第一天是星期四。然后再使用循环在div里填出1-31日。

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


要理解原理,完全自己可以写一个


可以用table,因为这就是一个table。不要听说“不用table来布局”就连该用的地方都不用了。


日历效果

你可以在上面链接中找一个满意的,望采纳

【热门文章】
【热门文章】