html日历菜鸟,菜鸟第一次发代码 -- 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

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+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 */

日一二三四五六