許久沒有寫過小例子的代碼了，今天有個朋友讓我用js幫他做一個日曆。實現基本的日曆功能，很可惜，本人對jquary等技術一直都不感興趣，也因是做後臺開發，很少寫前臺代碼，但朋友相求，不得不幫，於是乎寫了一個小實例，給大家分享下（因爲他要的很急，時間不是很充裕，沒有做代碼重構及樣式添加，僅僅是個小框架，勿噴）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<script language="javascript">
// 當文檔加載完成時，執行方法。
window.ready = createCalendar;
// 定義顯示星期數組
var weekArray = ["Sun","Mon","Tue","Web","Thu","Fri","Sat"];
// 定義顯示月份數組（程序中沒有用，但可以替換）
var monthArray = ["January","February","March","April","May","June","July","August","September","October","November","December"];
// 定義月份天數數組
var daysOfMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
// 定義兩個calendar的不同標示
var marks = ["main","bak"];
// 初始化calendar
document.ready(init());
// 監聽last事件
function backMonth(){
var calenderTime = document.getElementById(marks[0]+"_calenderTime").value;
var yearMonthDate = calenderTime.split("-");
var year = parseInt(yearMonthDate[0]);
var month = parseInt(yearMonthDate[1]-2);
changeCalendar(marks[0],year,month);
changeCalendar(marks[1],year,month+1);
}
// 監聽next事件
function nextMonth(){
var calenderTime = document.getElementById(marks[0]+"_calenderTime").value;
var yearMonthDate = calenderTime.split("-");
var year = parseInt(yearMonthDate[0]);
var month = parseInt(yearMonthDate[1]);
changeCalendar(marks[0],year,month);
changeCalendar(marks[1],year,month+1);
}
// 初始化calendar
function init(){
var time = new Date();
createCalendar(time,true,marks[0]);
document.writeln("===========================");
var time2 = new Date();
time2.setMonth(time.getMonth()+1);
createCalendar(time2,false,marks[1]);
}
// 創建Calendar
function createCalendar(time,flag,mark){
var calender_rows = getMonthCalenderValue(time,mark);
document.writeln("<table border=\"1\">");
for(var row = 0 ; row < 8 ; row ++){
document.write("<tr>");
for(var col = 0 ; col < (calender_rows[row]).length; col++){
// 初始化各行
if(row == 0){
if(col!=1 && !flag){
continue;
}
document.writeln("<td id=\""+(mark+"_"+row+"_"+col)+"\" >");
document.writeln((calender_rows[row])[col]);
document.writeln("</td>");
}else if(row == 1){
document.writeln("<td id=\""+(mark+"_"+row+"_"+col)+"\" >");
document.writeln(weekArray[col]);
document.writeln("</td>");
}else{
document.writeln("<td id=\""+(mark+"_"+row+"_"+col)+"\" onClick=\""+mark+"DateTime(this)\">");
document.writeln((calender_rows[row])[col]);
document.writeln("</td>");
}
}
document.writeln("</tr>");
}
document.writeln("</table>");
}
// 監聽改變calendar事件
function changeCalendar(mark,year,month){
// 處理月份 和 年份的關係
if(month >= 12){
year++ ;
month = 0 ;
}else if(month < 0){
year-- ;
month = 11 ;
}
var time = new Date(year,month);
//得到新的月份數據
var calender_rows = getMonthCalenderValue(time,mark);
//填充日曆單元格
fillCell(calender_rows,mark);
//更改月視圖
document.getElementById(mark+"_calenderTime").value = year+"-"+(time.getMonth()+1);
}
// 填充日曆單元格
function fillCell(calender_rows,mark){
for(var row = 2 ; row < 8 ; row ++){
for(var col = 0 ; col < 7 ; col++){
document.getElementById(mark+"_"+row+"_"+col).innerText = (calender_rows[row])[col];
}
}
}
// 得到calendar的所有數據
function getMonthCalenderValue(time,mark){
var calender_rows = new Array();
calender_rows[0] = getFirstRowUi(time,mark);
calender_rows[1] = weekArray;
// 得到具體日期數據
getShowMonthValues(calender_rows,time.getYear(),time.getMonth());
return calender_rows;
}
//得到該月所有日期數據
function getShowMonthValues(calender_rows,year,month){
var monthTop = new Date(year,month);
var currendMonthTopDay = monthTop.getDay();
// 判斷是否是閏年二月
if(month == 1 && ((year%4 == 0 && year %100 != 0)||year%400==0)){
daysOfMonth[month] = 29;
}
var days = daysOfMonth[month];
var count = 1;
var startFlag = false;
// 得到填充數據
for(var row = 2 ; row < 8 ; row ++){
(calender_rows[row]) = ["","","","","","",""];
for(var col = 0 ; col < 7 ; col++){
if( !startFlag && col == currendMonthTopDay ){
(calender_rows[row])[col] = count.toString();
startFlag = true;
count++;
}else if(startFlag && count <= days){
(calender_rows[row])[col] = count.toString();
count++;
}
}
}
}
// 得到填充第一行數據
function getFirstRowUi(time,mark){
var month = (time.getMonth() + 1);
month = month < 10 ? "0"+month : month;
var day = time.getDate();
day = day < 10 ? "0"+day : day;
var first_values = [
"<a onclick=\"backMonth();\">last< /a>",
"<input type=\"text\" id=\""+mark+"_calenderTime\" value=\""+time.getYear()+"-"+month+"-"+day+"\"/>",
"<a onclick=\"javascript:nextMonth();\">next</a>"
];
return first_values;
}
// 處理上面表格點擊事件
function mainDateTime(obj){
var value = obj.innerText;
value = value.length >1 ? value: "0"+value;
// 得到table元素
var table = obj.parentNode.parentNode.parentNode;
// 得到input元素
var sceneName = table.rows[0].cells[1].childNodes[0].value;
var yearMonthDay = sceneName.split("-");
alert("current time is : "+yearMonthDay[0]+"/"+yearMonthDay[1]+"/"+value);
}
// 處理下面表格點擊事件，具體步驟如上
function bakDateTime(obj){
var value = obj.innerText;
value = value.length >1 ? value: "0"+value;
var table = obj.parentNode.parentNode.parentNode;
var sceneName = table.rows[0].cells[0].childNodes[0].value;
var yearMonthDay = sceneName.split("-");
alert("current time is : "+yearMonthDay[0]+"/"+yearMonthDay[1]+"/"+value);;
}
</script>
</head>
<body>
</body>
</html>
此實例中，上面的calendar是當前月的，下面的calendar是下個月的。程序中實現了last，next的功能，並處理了日期點擊事件。但還有很多小bug，願大家勿噴，只是個框架而已。
代碼以共享，希望大家學習愉快。