html日历表样式写法,css+html实现简单的日历

这篇文章主要为大家详细介绍了由html、css、javascript结合实现的简单日历，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

web页面中很多地方都会用到日历显示，选择等，本文用html、css、javascript实现简单的日历。完成以后的效果与页面左侧的效果差不多，可以切换上个月、下个月。也可以根据实际情况进行扩展。

html

html部分比较简单，声明一个p，具体的html用javascript生成。整体内容大概是这样的：

demo

css/* 整体设置 */

*{margin:0px;padding:0px;}

/**

* 设置日历的大小

*/

.calendar{

width: 240px;

height: 400px;

display: block;

}

/**

* 设置日历顶部盒子

*/

.calendar .calendar-title-box{

position: relative;

width: 100%;

height: 36px;

line-height: 36px;

text-align:center;

border-bottom: 1px solid #ddd;

}

/**

* 设置上个月的按钮图标

*/

.calendar .prev-month {

position: absolute;

top: 12px;

left: 0px;

display: inline-block;

width: 0px;

height: 0px;

border-left: 0px;

border-top: 6px solid transparent;

border-right: 8px solid #999;

border-bottom: 6px solid transparent;

cursor: pointer;

}

/**

* 设置下个月的按钮图标

*/

.calendar .next-month {

position: absolute;

top: 12px;

right: 0px;

display: inline-block;

width: 0px;

height: 0px;

border-right: 0px;

border-top: 6px solid transparent;

border-left: 8px solid #999;

border-bottom: 6px solid transparent;

cursor: pointer;

}

/* 设置日历表格样式 */

.calendar-table{

width: 100%;

border-collapse: collapse;

text-align:center;

}

/* 表格行高 */

.calendar-table tr{

height: 30px;

line-height: 30px;

}

/* 当前天 颜色特殊显示 */

.currentDay {

color: red;

}

/* 本月 文字颜色 */

.currentMonth {

color: #999;

}

/* 其他月颜色 */

.otherMonth{

color: #ede;

}

样式设置基本没什么课说的，一些简单的设置。比如特殊的是表示“上个月”、“下个月”的图标，采用的绝对定位、利用css中的border属性设置样式。

javascript Date对象 开始正式的js代码之前，需要先了解js中的Date对象，通过Date对象，可以获取到年月日时分秒以及时间戳等信息,

也可以在初始化的时候直接设置年月日信息

日历中会涉及到每个月多少天之类的问题，在js中很简单，如果设置年月日的时候，超出当月，js会自动算成下个月的，例如4月只有30天，如果设置成31 日，获得的Date类型中自动会算成5月1日；如果设置成5月0日，js会处理成4月30日，那么5月-1日也就是4月29日

javascript了解了js中Date对象的基本用法，接下来就是代码实现部分了，整体思路是这样的：定义一个全局的dateObj变量，用来记录表格中需要显示的 年月信息。 标题中的内容根据dateObj中取，表格中的日期则中dateObj中取到年月对应的1号的所有信息，即可确定1号在表格第一行的位置，以此倒推上个月 最后几天的数据、正推本月和下个月的数据。

具体步骤：

1.声明dateObj变量，并赋初值为当前系统时间

2.给calendar p中渲染html元素

3.通过dateObj获取当月1号的信息，并以此遍历出表格中所有日期

4.给上一月、下一月图标绑定事件

本例中并没有添加点击表格中日期时候的事件，可以在bindEvent函数中添加如下代码获取所点击日期的信息

相关推荐：

javascript html5 canvas实现可拖动省份的中国地图