程式碼如下：
<!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=utf-8" />
<title>JavaScript製作的簡單日曆(附詳解) - muent.com</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>
沒有留言:
張貼留言