软件开发培训班 >> 编程开发 >> JavaScript

简单JavaScript日历及详细说明

　　本文标签：JavaScript,日历

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>calendar2</title> 
<style type="text/css"> 
#calendar{ 
background:#000; 
color:#FFF; 
font-size:0.8em; 
} 
#tittle{ 
font-size:1.4em; 
padding:4px 0.55em; 
} 
#days th { 
font-weight:bold; 
text-align:center; 
padding:4px 0.55em; 
} 
#calendar td{ 
text-align:center; 
padding:4px 0.55em; 
} 
#today{ 
color:#F00; 
font-weight:bold; 
} 
</style> 
<script type="text/javascript"> 
var calendar = { 
dayTable:null, //初始化TABLE 
year:null, //初始化年 
month:null, //初始化月份

getFirstDay:function(year,month){ //获取每个月第一天再星期几 
var firstDay = new Date(year,month,1); 
return firstDay.getDay(); //getDay()方法来获取 
}, 
getMonthLen:function(year,month){ //获取当月总共有多少天 
var nextMonth = new Date(year,month+1,1); //获取下个月的第一天 
nextMonth.setHours(nextMonth.getHours() - 3); //由于获取的天是0时,所以减去3小时则可以得出该月的天数 
return nextMonth.getDate(); //返回当天日期 
}, 
createCalendar:function(form,date){ //创建日历方法 
calendar.year = date.getFullYear(); //获得当时的年份,并赋值到calendar属性year中,以便别的方法的调用 
calendar.month = date.getMonth(); //跟上面获取年份的目的一样 
form.getElementsByTagName(th)[1].innerHTML = calendar.year + 年  + (calendar.month + 1) + 月; //插入年份和月份 
calendar.clearCalendar(form); //清空TABLE 
var monthLen = calendar.getMonthLen(calendar.year,calendar.month); //获取月份长度 
var firstDay = calendar.getFirstDay(calendar.year,calendar.month); //获取月份首天为星期几 
for(var i = 1;i <= monthLen;i++){ //循环写入每天的值进入TABLE中 
calendar.dayTable[i+firstDay-1].innerHTML = i; //i为循环值,加上第一天的星期值刚可以对应TABLE位置,但由于数组从0开始算,所以需要减去1 
if((i+firstDay-2) == new Date().getDate() && calendar.month == new Date().getMonth() && calendar.year == new Date().getFullYear()){ //判断是否是当天 
calendar.dayTable[i+firstDay-1].id = today; 
} 
} 
}, 
clearCalendar:function(form){ //清空TABLE方法 
this.dayTable = form.getElementsByTagName(td); 
for(var i = 0;i < this.dayTable.length;i++){ 
this.dayTable[i].innerHTML =  ; 
this.dayTable[i].id = ; 
} 
}, 
init:function(form){ //主方法 
this.dayTable = form.getElementsByTagName(td); 
this.createCalendar(form,new Date()); 
var preMon = form.getElementsByTagName(th)[0]; 
var nextMon = form.getElementsByTagName(th)[2]; 
preMon.onclick = function(){ //当点击左按钮时,减去一个月,并重绘TABLE 
calendar.createCalendar(form,new Date(calendar.year,calendar.month-1,1)); 
} 
nextMon.onclick = function(){ //当点击右按钮时,加上一个月,并重绘TABLE 
calendar.createCalendar(form,new Date(calendar.year,calendar.month+1,1)); 
} 
}

} 
window.onload = function(){ 
var calendars = document.getElementById(calendar);

calendar.init(calendars); 
} 
</script> 
</head> 
<body> 
<table id="calendar" cellspacing="0"> 
<tr> 
<th style="cursor:pointer;cursor:hand;"><<</th> 
<th id="tittle" colspan="5"> </th> 
<th style="cursor:pointer;cursor:hand;">>></th> 
</tr> 
<tr id="days"> 
<th>日</th> 
<th>一</th> 
<th>二</th> 
<th>三</th> 
<th>四</th> 
<th>五</th> 
<th>六</th> 
</tr> 
<tr> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
</table> 
</body> 
</html>

技术文章快速查找

jQuery 版元素拖拽原型代码

jQuery动态添加 input type=file的实现代码

在Ajax中使用Flash实现跨域数据读取的实现方法

popdiv

很棒的学习jQuery的12个网站推荐

javascript String split方法误操作

javascript 遍历验证所有文本框的值

图片展示效果鼠标经过变大图，支持FF

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建