window.onload = function() {var oInput = document.getElementsByTagName(‘input‘)[0];var oCalendar = document.getElementById(‘calendar‘);//console.log(oCalendar);

var oDate = newDate();var year =oDate.getFullYear();var month = oDate.getMonth()+1;//日期td

var oTds = oCalendar.getElementsByTagName(‘td‘);var flag = false;

oInput.οnfοcus= function() {

showDate(year,month);

}//顯示日歷

functionshowDate(year,month) {if (false ==flag) {var oTitle = document.createElement(‘div‘);

oTitle.className= ‘title‘;

oTitle.innerHTML= ‘

‘+(month-1)+‘月 ‘ +

‘

‘+year+‘年 ‘+month+‘月 ‘ +

‘

‘+(month+1)+‘月 ‘;

oCalendar.appendChild(oTitle);//月份span

ospans = oCalendar.getElementsByTagName(‘span‘);//console.log(ospans);

prevMonth = ospans[0];

nextMonth= ospans[3];

nowMonth= ospans[2];

nowYear= ospans[1];//創建星期

var otable = document.createElement(‘table‘);var othead = document.createElement(‘thead‘);var otr = document.createElement(‘tr‘);var arr = [‘日‘,‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘];for (var i=0; i

var oth = document.createElement(‘th‘);

oth.innerHTML=arr[i];

otr.appendChild(oth);

}

othead.appendChild(otr);

otable.appendChild(othead);

oCalendar.appendChild(otable);//先獲得當前月有多少天

if (1 == month || 3 == month || 5 == month || 7 == month || 8 == month || 10 == month || 12 ==month) {var dayNum = 31;

}else if (4 == month || 6 == month || 9 == month || 11 ==month) {var dayNum = 30;

}else if (2 == month &&isLeapYear(year)) {var dayNum = 29;

}else{var dayNum = 28;

}//確定當前月的1號是星期幾

oDate.setFullYear(year);

oDate.setMonth(month-1);

oDate.setDate(1);//日期

var otbody = document.createElement(‘tbody‘);for (var i=0; i<6; i++) {var oTr = document.createElement(‘tr‘);//每行里面有7列

for (var j=0; j<7; j++) {var oTd = document.createElement(‘td‘);//oTd.innerHTML = 1;

oTr.appendChild(oTd);

}

otbody.appendChild(oTr);

}

otable.appendChild(otbody);//獲得今天1號對應的是星期幾

var week =oDate.getDay();var oTds = oCalendar.getElementsByTagName(‘td‘);//alert(week);

for (var i=0; i

oTds[i+week].innerHTML = i+1;

}//如果當前月month 是12或者1

if (1 ==month) {

prevMonth.innerHTML= 12;

}else if (12 ==month) {

nextMonth.innerHTML= 1;

}//讓當前日期顯示紅色、后面的顯示藍色

showColor();//給左右月份綁定點擊事件

monthEvent();//給所有的td綁定點擊事件

tdClick();//判斷最后一行是否全為空

lastTr();//獲得促銷信息

getPromotion();

flag= true;

}

}//最后一行如果全部為空就將其隱藏

functionlastTr() {//查找最后一行的所有td

var flag = true;for (var i=35; i<42; i++) {if (oTds[i].innerHTML != ‘‘) {//有任何一個td不為空就設置為false

flag = false;

}

}//全部是空的

if(flag) {for (var i=35; i<42; i++) {

oTds[i].style.display= ‘none‘;

}

}

}//給所有的td綁定點擊事件

functiontdClick() {for (var i=0; i

oTds[i].οnclick= function() {if (‘red‘ == this.className ||‘blue‘ == this.className) {var year =nowYear.innerHTML;var month =nowMonth.innerHTML;var date = this.innerHTML;

oInput.value= year +‘-‘+month+‘-‘+date;

flag= false;

oCalendar.innerHTML= ‘‘;

}else{

alert(‘您只能選擇紅色或藍色區域‘);

}

}

}

}//當前日期顯示紅色、后面的顯示藍色

functionshowColor() {//當前的日期

var oday = newDate().getDate();for (var i=0; i

oTds[i].className= ‘red‘;var oindex =i;

}

}for (var j=oindex+1; j

oTds[j].className= ‘blue‘;

}

}//給左右月份綁定點擊事件

functionmonthEvent() {//向左的月份div

prevMonth.parentNode.onclick = function() {//alert(‘向左‘);

flag = false;

oCalendar.innerHTML= ‘‘;if (12 ==prevMonth.innerHTML) {

showDate(year-= 1, 12);

}else{

showDate(year,parseInt(prevMonth.innerHTML));

}

}//向左的月份div

nextMonth.parentNode.onclick = function() {//alert(‘向右‘);

flag = false;

oCalendar.innerHTML= ‘‘;if (1 ==nextMonth.innerHTML) {

showDate(year+=1,1);

}else{

showDate(year,parseInt(nextMonth.innerHTML));

}

}

}//判斷是否是閏年

functionisLeapYear(year) {if (0 == year%100 && 0 == year%400) {return true;

}else if (year%100 != 0 && year%4 ==0) {return true;

}else{return false;

}

}

}

總結

以上是生活随笔為你收集整理的ajax异步日历,用AJAX自定义日历(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。