javascript实现2016新年版日历

先看看效果图，效果比较简单：

具体代码：

  
    
    
    
      *{
 margin:0;
 padding:0;
      }
 
      .calendar{
 width:300px;
 margin:100px auto;
 text-align:center;
 font-size:12px;
      }

      .calendar .wrap{
 width:100%;
 height:36px;
 line-height:36px;
      }

      .calendar .wrap .theYear{
  
      }
 
      .calendar .wrap .theMonth{
 color:#666;
      }      
 
      .calendar .wrap span{
 font-size:24px;
 color: #DDD;
 cursor:pointer;
 font-family: Georgia, "Times New Roman", Times, serif;
      }
 
      .calendar .wrap span b:hover{ 
 color: #777;
      }      
 
      .calendar .wrap .span{
 float:left;
      }

      .calendar .wrap .prev_year{
 float:right;
 margin-right:12px;
 font-family:"sans-serif";
 font-weight:bold;
 font-size:14px;
  
      }
 
      .calendar .wrap .next_year{
 float:right;
 font-family:"sans-serif";
 font-weight:bold;
 font-size:14px;
      }
 
      .calendar .wrap .prev_month{
 float:right;
 margin-right:12px;
 font-family:"sans-serif";
 font-weight:bold;
 margin-right:10px;
      }
 
      .calendar .wrap .next_month{
 float:right;
 font-family:"sans-serif";
 font-weight:bold;
 margin-right:10px;
      }      
 
      .calendar .wrap .next_year:hover,.calendar .wrap .prev_year:hover,
      .calendar .wrap .next_month:hover,.calendar .wrap .prev_month:hover{
 color:#999;
      }
 
      .calendar table{
 width:100%;
 border-collapse:collapse;
      }

      .calendar .header{
 background-color:#EEE;     
 font-family:"Microsoft YaHei"; 
      }

      .calendar .header td{
 cursor:default;
      }
     
      .calendar td{
 border:1px solid #CCC;
 line-height:36px;
 cursor:pointer;
      }
 
      .calendar td:hover{
 background-color:#EEE;
      }

      .calendar .empty{
 cursor:default;
      }
 
      .calendar .empty:hover{
 background-color:#FFF;
      }

      .calendar .today{
 background-color:#66BE8C;
 color:#FFF;
      }
 
      .calendar .today:hover{
 background-color:#66BE8C;
 color:#FFF;
      }      
 
    
    
    
  
  
    
      
 2016/1
 >> 
 >  
 <  
 <<
      
      

 

   
日
   
一
   
二
   
三
   
四
   
五
   
六
 
      
    
     
    
     
  

Javascript代码    

// 判断是否为闰年
function IsLeapYear(year){
  if((year%400==0)||(year%4==0 && year%100!=0)){
    return true;
  }
  return false;
}
 
// 日历
function createCalendar(year,month,date){
  var d=new Date();   
  if(!year || year<=0){
    cur_year=d.getFullYear();  // 年份
  }else{
    cur_year=year;
  }
 
  if(!month || month<=0){
    cur_mon=d.getMonth();  // 日期     
  }else{
    cur_mon=month-1;
  }
 
  if(!date || date<=0){
    cur_date=d.getDate();  // 日期     
  }else{
    cur_date=date;
  }
 
  month_days=new Array(31,28+IsLeapYear(d.getFullYear()),31,30,31,30,31,31,30,31,30,31); // 月份天数数组
  month_firstday_date=new Date(cur_year,cur_mon,1);
  monthDays=month_days[cur_mon];     
  monthFirstday=month_firstday_date.getDay(); // 月份的第一天是星期几
  lines=Math.ceil((monthDays+monthFirstday)/7);  // 表格所需行数     
  var calendarBody="";
  for(var i=0;i";
 }else{
   calendarBody+=""+date+"";
 }
      }else{
 calendarBody+="";
      }
    }
    calendarBody+="";
  }
  return calendarBody;
}