編寫一個日歷控件

這一小節就編寫一個小小日歷。日歷的編寫看起來不容易，實際上掌握了思路，編寫起來也很簡單。日歷的制作可以轉化成一個二維數組的排序，根據排序然后生成html代碼。

 

 

1.首先確定這個月的第一天是星期幾，再利用這日期確定其它日期的位置，最后定制成一個二維數組，根據二維數組生成html。

2.監聽事件，無非是上一年，上個月，下個月，下一年等。

3.觸發事件，點擊完按鈕后，日期重新計算。然后做的事情很簡單，再按第一步進行。

 

第一步：

確定這個月的第一天是星期幾，比如這個月是2月1號，對應的是星期天。

var d = (new Date(Calendar._Y_year,Calendar._M_month-1,1)).getDay();

有些月份是小月，有些是大月。所以要先做一件事情，就是計算日歷顯示的行數。這里要用一個方法getRows();

function getRows(d) {
            var totalDay = d + iObj.thisMonthDay;
            return Math.ceil(totalDay/7);
        }

把整個月的日期排序生成一個二維數組。start開始為0，表示日歷格子的位置。這里分為三部分計算，fill小於0為上個月的日期；fill大於0並且小於該月最大日期數；還有下個月的日期從1開始計算起。所以1號就放在第一行第一位，對應arr[0][0]的位置。

for(i = 0; i < getRows(d); i++) {
    arr[i] = [];
    for(j = 0; j < 7; j++) {
        start++;
        fill = start - d;
        if(fill > 0 && fill <= thisMonthDay) {
            arr[i][j] = fill;
        }else if(fill <= 0) {
            arr[i][j] =  dayLen(Calendar._M_lastMonth) + fill;
        }else if(fill > thisMonthDay) {
            arr[i][j] = ++nextMonthfill;
        }
    }
}

接下來要生成html

strArr.push('<table class = "myCalendar" cellspacing = 0 >');
arr.forEach(function (value, index, arr){
    strArr.push('<tr class = "myCal-row"><td class = "myCal-row-date">' + value.join('</td><td class = "myCal-row-date">') + '</td></tr>');
});
strArr.push('</table>');
iObj.strArr = strArr;
strArrHtml = iObj.strArr.join('');
el.innerHTML = strArrHtml;

到這一步，日歷的雛形出來了。

 

 

第二步：添加事件按鈕

添加事件按鈕就是添加選擇年月的按鈕。

function loadBtn(strArr, btn) {
    var time = ['lastYear','lastMonth','thisYear','thisMonth','nextMonth','nextYear'];
    strArr.push('<table class = "myCal-btn"><tr class = "myCal-row btn-row">'); 
    for(var i = 0, len = time.length; i < len; i++) {
        strArr.push('<td class = "myCal-row-btn myCal-row-' + time[i] + '">' + btn[i] + '</td>');
    }
    strArr.push('</tr></table>');
}

添加事件監聽

function addEvent(type, fn, userCapture) {
    window.addEventListener ? this.addEventListener(type, fn, userCapture || false) : this.attachEvent('on' + type, fn);
}

function bindEvent() {
    getDom();
    addEvent.call(iObj.lastYear, touchStart, startHandle);
    addEvent.call(iObj.lastYear, touchEnd, endHandle);
    addEvent.call(iObj.lastMonth, touchStart, startHandle);
    addEvent.call(iObj.lastMonth, touchEnd, endHandle);
    addEvent.call(iObj.nextMonth, touchStart, startHandle);
    addEvent.call(iObj.nextMonth, touchEnd, endHandle);
    addEvent.call(iObj.nextYear, touchStart, startHandle);
    addEvent.call(iObj.nextYear, touchEnd, endHandle);
}

 

第三步：觸發監聽事件

點擊按鈕時觸發startHandle方法，點擊按鈕獲取新的時間，再刷新前后的時間。

function startHandle() {
    var _this = iObj._this;
    if(/lastYear/.test(this.className)) {lastYear(); updateTime();}
    if(/lastMonth/.test(this.className)) {lastMonth(); updateTime();}
    if(/nextMonth/.test(this.className)) {nextMonth(); updateTime();}
    if(/nextYear/.test(this.className)) {nextYear(); updateTime();}
}

 獲取新的時間

function lastYear(e) {
    Calendar._Y_year = Calendar._Y_lastYear;
}
function nextYear(e) {
    Calendar._Y_year = Calendar._Y_nextYear;
}
function lastMonth(e) {
    if(Calendar._M_month == 1) {
        Calendar._Y_year = Calendar._Y_lastYear;
        Calendar._M_month = 12;
    }else {
        Calendar._M_month = Calendar._M_lastMonth;
    }
}
function nextMonth(e) {
    if(Calendar._M_month == 12) {
        Calendar._Y_year = Calendar._Y_nextYear;
        Calendar._M_month = 1;
    }else {
        Calendar._M_month = Calendar._M_nextMonth;
    }
}

更新時間

function updateTime(){
    getLastYear();
    getLastMonth();
    getNextMonth();
    getNextYear();
}
function getLastYear() {
    Calendar._Y_lastYear = Calendar._Y_year - 1;
}
function getNextYear() {
    Calendar._Y_nextYear = Calendar._Y_year + 1;
}
function getLastMonth() {
    if(Calendar._M_month == 1) {Calendar._M_lastMonth = 12; Calendar._Y_lastYear = Calendar._Y_year - 1;}
    else {Calendar._M_lastMonth = Calendar._M_month - 1;}
}
function getNextMonth() {
    if(Calendar._M_month == 12) {Calendar._M_nextMonth = 1;Calendar._Y_nextYear = Calendar._Y_year + 1;}
    else {Calendar._M_nextMonth = Calendar._M_month + 1;}
}

 點擊完按鈕endHandle,摘除監聽事件，把新獲取的時間再按第一步重新計算。

function endHandle() {
    var _this = iObj._this;
    removeEvent.call(iObj.lastYear, touchStart, startHandle);
    removeEvent.call(iObj.lastYear, touchEnd, endHandle);
    removeEvent.call(iObj.lastMonth, touchStart, startHandle);
    removeEvent.call(iObj.lastMonth, touchEnd, endHandle);
    removeEvent.call(iObj.nextMonth, touchStart, startHandle);
    removeEvent.call(iObj.nextMonth, touchEnd, endHandle);
    removeEvent.call(iObj.nextYear, touchStart, startHandle);
    removeEvent.call(iObj.nextYear, touchEnd, endHandle);
    iObj.refresh();
}

至於下面的時分秒也很簡單，給一個定時器setInterval，每一秒重新計算，再刷新時分秒的內容。

function run() {
    iObj.hours = doc.getElementsByClassName('myCal-hours')[0];
    iObj.minutes = doc.getElementsByClassName('myCal-minutes')[0];
    iObj.seconds = doc.getElementsByClassName('myCal-seconds')[0];
    iObj.hours.innerHTML = isZero(new Date().getHours());
    iObj.minutes.innerHTML = isZero(new Date().getMinutes());
    iObj.seconds.innerHTML = isZero(new Date().getSeconds());
}

到這里大功告成。還差最后一步，激活日歷：

var calendar = new myCalendar('myCalendar',{
    width: 'auto',
    height: 'auto',
    btn: true,
    header: true,
    seconds: true,
    background: 'rgba(48, 83, 173, 0.44)',
    color: '#000'
});

 

下載完整的Demo