js 實現日曆效果

許久沒有寫過小例子的代碼了,今天有個朋友讓我用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,願大家勿噴,只是個框架而已。

代碼以共享,希望大家學習愉快。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章