制作简单日历

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"证明设置正确

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部分

(function(){
/*
*用于记录日期，显示的时候，根据dateObj中的日期的年月显示
*/
vardateObj=(function(){
var_date=newDate();//默认为当前系统时间
return{
getDate:function(){
return_date;
},
setDate:function(date){
_date=date;
}
};
})();

//设置calendardiv中的html部分
renderHtml();
//表格中显示日期
showCalendarData();
//绑定事件
bindEvent();

/**
*渲染html结构
*/
functionrenderHtml(){
varcalendar=document.getElementById("calendar");
vartitleBox=document.createElement("div");//标题盒子设置上一月下一月标题
varbodyBox=document.createElement("div");//表格区显示数据

//设置标题盒子中的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);//添加到calendardiv中

//设置表格区的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>";
//添加到calendardiv中
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;
}
})();

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'));
});
}