html
html部分比较简单，声明一个p，具体的html用javascript生成。整体内容大概是这样的：
<!doctypehtml>
<html>
<head>
<metacharset='utf-8'>
<linkrel='stylesheet'href='外部的css文件路径'/>
<title>demo</title>
</head>
<body>
<pclass='calendar'id='calendar'></p>
<scripttype='text/javascript'src='外部的javascript文件路径'></script>
</body>
</html>
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:1pxsolid#ddd;
}
/**
*设置上个月的按钮图标
*/
.calendar.prev-month{
position:absolute;
top:12px;
left:0px;
display:inline-block;
width:0px;
height:0px;
border-left:0px;
border-top:6pxsolidtransparent;
border-right:8pxsolid#999;
border-bottom:6pxsolidtransparent;
cursor:pointer;
}
/**
*设置下个月的按钮图标
*/
.calendar.next-month{
position:absolute;
top:12px;
right:0px;
display:inline-block;
width:0px;
height:0px;
border-right:0px;
border-top:6pxsolidtransparent;
border-left:8pxsolid#999;
border-bottom:6pxsolidtransparent;
cursor:pointer;
}
/*设置日历表格样式*/
.calendar-table{
width:100%;
border-collapse:collapse;
text-align:center;
}
/*表格行高*/
.calendar-tabletr{
height:30px;
line-height:30px;
}
/*当前天颜色特殊显示*/
.currentDay{
color:red;
}
/*本月文字颜色*/
.currentMonth{
color:#999;
}
/*其他月颜色*/
.otherMonth{
color:#ede;
}
样式设置基本没什么课说的，一些简单的设置。比如特殊的是表示“上个月”、“下个月”的图标，采用的绝对定位、利用css中的border属性设置样式。
javascriptDate对象
开始正式的js代码之前，需要先了解js中的Date对象，通过Date对象，可以获取到年月日时分秒以及时间戳等信息,
vard1=newDate();//获取当前系统时间我现在的时间是2016年4月25日星期一
d1.getFullYear();//获取年信息，2016
d1.getMonth();//获取月信息（从0开始范围：0-11）3
d1.getDate();//获取天信息此处结果：25
d1.getDay();//获取星期信息（0-6）此处结果：1
也可以在初始化的时候直接设置年月日信息
#设置2016年3月15日
vard2=newDate(2016,2,15);//月是从0开始计数，需要减一
d2.getFullYear();//2016
d2.getMonth();//2
d2.getDate();//15
d2.toLocaleDateString();//"2016/3/15"证明设置正确
日历中会涉及到每个月多少天之类的问题，在js中很简单，如果设置年月日的时候，超出当月，js会自动算成下个月的，例如4月只有30天，如果设置成31日，获得的Date类型中自动会算成5月1日；如果设置成5月0日，js会处理成4月30日，那么5月-1日也就是4月29日
vard3=newDate(2016,3,30);
d3.toLocaleDateString();//"2016/4/30"
vard4=newDate(2016,3,31);
d4.toLocaleDateString();//"2016/5/1"
vard5=newDate(2016,3,33);
d5.toLocaleDateString();//"2016/5/3"
vard6=newDate(2016,4,1);
d6.toLocaleDateString();//"2016/5/1"
vard7=newDate(2016,4,0);
d7.toLocaleDateString();//"2016/4/30"
vard8=newDate(2016,4,-3);
d8.toLocaleDateString();//"2016/4/27"
javascript
了解了js中Date对象的基本用法，接下来就是代码实现部分了，整体思路是这样的：定义一个全局的dateObj变量，用来记录表格中需要显示的年月信息。标题中的内容根据dateObj中取，表格中的日期则中dateObj中取到年月对应的1号的所有信息，即可确定1号在表格第一行的位置，以此倒推上个月最后几天的数据、正推本月和下个月的数据。
具体步骤：
1.声明dateObj变量，并赋初值为当前系统时间
2.给calendarp中渲染html元素
3.通过dateObj获取当月1号的信息，并以此遍历出表格中所有日期
4.给上一月、下一月图标绑定事件
(function(){
/*
*用于记录日期，显示的时候，根据dateObj中的日期的年月显示
*/
vardateObj=(function(){
var_date=newDate();//默认为当前系统时间
return{
getDate:function(){
return_date;
},
setDate:function(date){
_date=date;
}
};
})();
//设置calendarp中的html部分
renderHtml();
//表格中显示日期
showCalendarData();
//绑定事件
bindEvent();
/**
*渲染html结构
*/
functionrenderHtml(){
varcalendar=document.getElementById("calendar");
vartitleBox=document.createElement("p");//标题盒子设置上一月下一月标题
varbodyBox=document.createElement("p");//表格区显示数据
//设置标题盒子中的html
titleBox.className='calendar-title-box';
titleBox.innerHTML="<spanclass='prev-month'id='prevMonth'></span>"+
"<spanclass='calendar-title'id='calendarTitle'></span>"+
"<spanid='nextMonth'class='next-month'></span>";
calendar.appendChild(titleBox);//添加到calendarp中
//设置表格区的html结构
bodyBox.className='calendar-body-box';
var_headHtml="<tr>"+
"<th>日</th>"+
"<th>一</th>"+
"<th>二</th>"+
"<th>三</th>"+
"<th>四</th>"+
"<th>五</th>"+
"<th>六</th>"+
"</tr>";
var_bodyHtml="";
//一个月最多31天，所以一个月最多占6行表格
for(vari=0;i<6;i++){
_bodyHtml+="<tr>"+
"<td></td>"+
"<td></td>"+
"<td></td>"+
"<td></td>"+
"<td></td>"+
"<td></td>"+
"<td></td>"+
"</tr>";
}
bodyBox.innerHTML="<tableid='calendarTable'class='calendar-table'>"+
_headHtml+_bodyHtml+
"</table>";
//添加到calendarp中
calendar.appendChild(bodyBox);
}
/**
*表格中显示数据，并设置类名
*/
functionshowCalendarData(){
var_year=dateObj.getDate().getFullYear();
var_month=dateObj.getDate().getMonth()+1;
var_dateStr=getDateStr(dateObj.getDate());
//设置顶部标题栏中的年、月信息
varcalendarTitle=document.getElementById("calendarTitle");
vartitleStr=_dateStr.substr(0,4)+"年"+_dateStr.substr(4,2)+"月";
calendarTitle.innerText=titleStr;
//设置表格中的日期数据
var_table=document.getElementById("calendarTable");
var_tds=_table.getElementsByTagName("td");
var_firstDay=newDate(_year,_month-1,1);//当前月第一天
for(vari=0;i<_tds.length;i++){
var_thisDay=newDate(_year,_month-1,i+1-_firstDay.getDay());
var_thisDayStr=getDateStr(_thisDay);
_tds[i].innerText=_thisDay.getDate();
//_tds[i].data=_thisDayStr;
_tds[i].setAttribute('data',_thisDayStr);
if(_thisDayStr==getDateStr(newDate())){//当前天
_tds[i].className='currentDay';
}elseif(_thisDayStr.substr(0,6)==getDateStr(_firstDay).substr(0,6)){
_tds[i].className='currentMonth';//当前月
}else{//其他月
_tds[i].className='otherMonth';
}
}
}
/**
*绑定上个月下个月事件
*/
functionbindEvent(){
varprevMonth=document.getElementById("prevMonth");
varnextMonth=document.getElementById("nextMonth");
addEvent(prevMonth,'click',toPrevMonth);
addEvent(nextMonth,'click',toNextMonth);
}
/**
*绑定事件
*/
functionaddEvent(dom,eType,func){
if(dom.addEventListener){//DOM2.0
dom.addEventListener(eType,function(e){
func(e);
});
}elseif(dom.attachEvent){//IE5+
dom.attachEvent('on'+eType,function(e){
func(e);
});
}else{//DOM0
dom['on'+eType]=function(e){
func(e);
}
}
}
/**
*点击上个月图标触发
*/
functiontoPrevMonth(){
vardate=dateObj.getDate();
dateObj.setDate(newDate(date.getFullYear(),date.getMonth()-1,1));
showCalendarData();
}
/**
*点击下个月图标触发
*/
functiontoNextMonth(){
vardate=dateObj.getDate();
dateObj.setDate(newDate(date.getFullYear(),date.getMonth()+1,1));
showCalendarData();
}
/**
*日期转化为字符串，4位年+2位月+2位日
*/
functiongetDateStr(date){
var_year=date.getFullYear();
var_month=date.getMonth()+1;//月从0开始计数
var_d=date.getDate();
_month=(_month>9)?(""+_month):("0"+_month);
_d=(_d>9)?(""+_d):("0"+_d);
return_year+_month+_d;
}
})();
本例中并没有添加点击表格中日期时候的事件，可以在bindEvent函数中添加如下代码获取所点击日期的信息
vartable=document.getElementById("calendarTable");
vartds=table.getElementsByTagName('td');
for(vari=0;i<tds.length;i++){
addEvent(tds[i],'click',function(e){
console.log(e.target.getAttribute('data'));
});
}
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h55006.shtml
