菜鸟第一次发代码 -- JS日历

/************************ 运行区域 *********************/

var nowDate = new Date().getTime();
var newDate = nowDate;
var tdArr = $('.td');
/*循环更新 时分秒*/
setInterval(showHMS,50);

/*显示日历内容*/
new Format(newDate).YMD();
new Calender(newDate).showDate();

/*给按钮绑定控制器改变日期  ***核心***  */
$('#yearDown,#yearUp,#monthUp,#monthDown').bind('click',function(){
  var strBtn = $(this).attr('id');
  newDate = ChangeDate(strBtn,newDate);
  new Calender(newDate).showDate();
  new Format(newDate).YMD();
});






//************************ 函数区域 **********************/
//显示时分秒
function showHMS(){
  $('.timeDate').html(new Format(new Date()).HMS);
}
//格式化日期
function Format(date){                     // 外部传入的 date 参数应该是一个 毫秒数
  if(!date){ date = new Date(); }          // 如果没有实参date 默认初始值为当前日期
  else{ date = new Date(date);}            // 此时参数 date 是一个日期
  this.year = date.getFullYear();
  this.month = date.getMonth();
  //this.day = date.getDate();
  this.hours = function(){
    var h = date.getHours();
    h=h<10? '0'+h:h;
    return h
  };
  this.minute = function(){
    var m = date.getMinutes();
    m = m<10? '0'+m:m;
    return m
  };
  this.second = function(){
    var s = date.getSeconds();
    s = s<10? '0'+s:s;
    return s
  };
  this.am = this.hours()>=12? '下午':'上午';
  this.week=function(){
    var w = ['sun','mon','wed','tue','thu','fri','sat'];
    w = w[date.getDay()];
    return w
  };
  this.YMD = function(){
    $('.mainDate').html(this.year+'年'+(this.month+1)+'月');
  };
  this.HMS = this.am+' '+this.hours()+':'+this.minute()+':'+this.second();
}


//日历对象构造

function Calender(date){                          // 传入一个毫秒数

  this.dateArr = function(){
    var fstDay = date - (new Date(date).getDate()-1)*86400000;
    var i = new Date(fstDay).getDay();
    var nextDay = fstDay;
    var nextDayArr = [];
    var prevDay = fstDay;
    nextDayArr.push(fstDay);
    for(var j=0;j<(42-i-1);j++){nextDayArr.push(nextDay += 86400000);}
    if( 0 == i){ return nextDayArr }
    else {
      var prevDayArr = [];
      for(var k=i;k>0;k--){prevDayArr.push( prevDay -= 86400000 );}
      //拼接数组 得到当前日期日历盘的所有日期毫秒数
      return prevDayArr.reverse().concat(nextDayArr);
    }
  };

  this.showDate = function(){
    var arrDate = this.dateArr();
    var fstDay = date - (new Date(date).getDate()-1)*86400000;
    var i = new Date(fstDay).getDay();
    var d = monthDate(date);
    for(var x=0;x<42;x++){
      tdArr[x].style.backgroundColor =
          (arrDate[x] == nowDate ? '#00bfff' : '' );
      tdArr[x].style.color =
          x < i ? '' : x > (i+d-1) ? '' : '#00bfff';
      if(arrDate[x] == nowDate) {tdArr[x].style.color ='#fff5ee' }
      tdArr[x].innerHTML = new Date(arrDate[x]).getDate();
    }
  }
}

//更改年月  日历数组控制器
function ChangeDate(btnStr,date){
  var month = monthDate(date);
  var day = new Date(date).getDate();
  var bool = new Calender(date).dateArr()[0] >= 86400000;
  if (true == bool) {
    switch (btnStr) {
      case 'monthUp':   date += (month-day+1) * 86400000;break;
      case 'monthDown': date -= day * 86400000;break;
      case 'yearUp':    date = month == 28 ? date + 86400000 * 365 : date + 86400000 * 366;break;
      case 'yearDown':  date = month == 28 ? date - 86400000 * 365 : date - 86400000 * 366;break;
      default :alert('ERROR CLICK!!!');break;
    }
  } else {alert('ERROR: FIRST PAGE OF THE WHOLE CALENDER!!!');}
  return date;                          //返回主要的 毫秒数
}

//根据特殊月份 返回不同的月份天数
function monthDate(date) {
  var month = new Date(date).getMonth() + 1;
  var bool = this.specialYear(date);
  if ('true' == bool){
    return month == 2 ? 29 :
        month == 4 ? 30 : month == 6 ? 30 :
            month == 9 ? 30 : month == 11 ? 30 : 31
  }
  else {
    return month == 2 ? 28 :
        month == 4 ? 30 : month == 6 ? 30 :
            month == 9 ? 30 : month == 11 ? 30 : 31
  }
}

//是否是闰年
function specialYear(date){
  var year = new Date(date).getFullYear();          //传入毫秒数 确认年份
  return (year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0) ? 'true' : 'false';
}


/*  html */

<div id="calender">
  <div id="calenderTitle">
    <span id="yearDown" class="btn_date left_year"></span>
    <span id="monthDown" class="btn_date left_month"></span>
    <span class="mainDate"></span>
    <span id="monthUp" class="btn_date right_month"></span>
    <span id="yearUp" class="btn_date right_year"></span>
  </div>
  <table id="mainCalender">
    <thead id="calender_title">
    <tr>
      <th>日</th>
      <th>一</th>
      <th>二</th>
      <th>三</th>
      <th>四</th>
      <th>五</th>
      <th>六</th>
    </tr>
    </thead>
    <tbody id="calender_container">
    <tr>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
    </tr>
    <tr>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
    </tr>
    <tr>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
    </tr>
    <tr>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
    </tr>
    <tr>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
    </tr>
    <tr>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
      <td class="td"></td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
      <td colspan="7"><span class="timeDate"></span></td>
    </tr>
    </tfoot>
  </table>
</div>

转载于:https://my.oschina.net/haiorg/blog/626228