當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

编写一个日历控件

發布時間：2024/4/17 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了编写一个日历控件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這一小節就編寫一個小小日歷。日歷的編寫看起來不容易，實際上掌握了思路，編寫起來也很簡單。日歷的制作可以轉化成一個二維數組的排序，根據排序然后生成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方法，點擊按鈕獲取新的時間，再刷新前后的時間。

?獲取新的時間

更新時間

?點擊完按鈕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

轉載于:https://www.cnblogs.com/Songyc/p/4299134.html

總結

以上是生活随笔為你收集整理的编写一个日历控件的全部內容，希望文章能夠幫你解決所遇到的問題。

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