js實現(xiàn)日歷
這周寫自己的項目發(fā)現(xiàn)又用到日歷了，加之自己畢業(yè)之后的第一個工作中遇到的任務(wù)也是需要寫個日歷(組員寫了，我就不用寫了)今天就來好好折騰一下日歷是怎么寫的。
首先，我們看看 windows 的日歷。發(fā)現(xiàn)總共有這么幾個元素。先實現(xiàn)試試。
1.年份的選擇、月份的選擇2.周一 ~ 周日(周日 ~ 周六)3.日歷格子 6*7 = 42
從數(shù)據(jù)的角度來分析日歷的實現(xiàn)是比較簡單的1.我們需要顯示一個當(dāng)前時間的結(jié)構(gòu) - new Date()2.我們需要顯示當(dāng)月的信息 - [星期(周一~周日)，日期(1-[28,29,30,31])]其中我們只要知道了每個月的 1日 是星期幾，就能很容易地擺放后面的日子(萬事開頭難)。
我們最多需要 6 行來顯示我們的日期，因為要第一排如果只包含本月的一天 6(上個月的) + (1 + 4*7)，這樣就五行了，當(dāng)月天數(shù)若大于 29，就顯示不下了 確定了 6 行之后，我們發(fā)現(xiàn)我們可能需要獲取上個月，和下個月多出來的幾天的擺放位置。 不同年份的不同月的 2月份，我們知道它的日期是不同的，所以我們還需要判斷 平年還是閏年。3.顯示上個月，下個月的切換。我們發(fā)現(xiàn)需要有個函數(shù)來幫我們更新日歷。
分析完之后，讓我們跟著 新增/修改 一些代碼。
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>Document</title><style> .week-item { display: inline-block; width: 80px; height: 40px; line-height: 40px; border: 1px solid sandybrown; text-align: center; } .date-item { display: inline-block; width: 80px; height: 40px; line-height: 40px; border: 1px solid beige; text-align: center; }</style></head><body> <div class='wrapper'> <div class='year-line'> <button class='year-prev'>上一月</button> <button class='year-now'></button> <button id='nowMonth'></button> <button id='nowDate'></button> <button class='year-next'>下一月</button> </div> <div class='week-line'></div> <div class='date-wrap'></div> </div></body><script> // 工具方法 - start // 1.為了獲得每個月的日期有多少，我們需要判斷 平年閏年[四年一閏，百年不閏，四百年再閏] const isLeapYear = (year) => { return (year % 400 === 0) || (year % 100 !== 0 && year % 4 === 0); }; // 2.獲得每個月的日期有多少，注意 month - [0-11] const getMonthCount = (year, month) => { let arr = [ 31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]; let count = arr[month] || (isLeapYear(year) ? 29 : 28); return Array.from(new Array(count), (item, value) => value + 1); }; // 3.獲得某年某月的 1號 是星期幾，這里要注意的是 JS 的 API-getDay() 是從 [日-六](0-6)，返回 number const getWeekday = (year, month) => { let date = new Date(year, month, 1); return date.getDay(); }; // 4.獲得上個月的天數(shù) const getPreMonthCount = (year, month) => { if (month === 0) { return getMonthCount(year - 1, 11); } else { return getMonthCount(year, month - 1); } }; // 5.獲得下個月的天數(shù) const getNextMonthCount = (year, month) => { if (month === 11) { return getMonthCount(year + 1, 0); } else { return getMonthCount(year, month + 1); } }; // 工具方法 - end let weekStr = ’日一二三四五六’; weekArr = weekStr.split(’’).map(item => ’星期’ + item); // 插入星期 dom let weekDomStr = ’’; let oFragWeek = document.createDocumentFragment(); weekArr.forEach(item => { let oSpan = document.createElement(’span’); let oText = document.createTextNode(item); oSpan.appendChild(oText); oSpan.classList.add(’week-item’); oFragWeek.appendChild(oSpan); }); let weekWrap = document.getElementById(’weekLine’); weekWrap.appendChild(oFragWeek); // 這里獲得我們第一次的 數(shù)據(jù) 數(shù)組 const updateCalendar = (year, month, day) => { if (typeof year === ’undefined’ && typeof month === ’undefined’ && typeof day === ’undefined’) { let nowDate = new Date(); year = nowDate.getFullYear(); month = nowDate.getMonth(); day = nowDate.getDate(); } // 更新一下頂部的年月顯示 document.getElementById(’nowYear’).innerHTML = year; document.getElementById(’nowMonth’).innerHTML = month + 1; document.getElementById(’nowDate’).innerHTML = day; // 生成日歷數(shù)據(jù)，上個月剩下的的 x 天 + 當(dāng)月的 28（平年的2月）或者29（閏年的2月）或者30或者31天 + 下個月的 y 天 = 42 let res = []; let currentMonth = getMonthCount(year, month); let preMonth = getPreMonthCount(year, month); let nextMonth = getNextMonthCount(year, month); let whereMonday = getWeekday(year, month); if (whereMonday === 0) { whereMonday = 7 } // 感謝網(wǎng)友 luoyiming 的測試（哈哈！謝謝！）：這里當(dāng) whereMonday 為 0 的時候會截取上月的所有數(shù)據(jù) let preArr = preMonth.slice(-1 * whereMonday) let nextArr = nextMonth.slice(0, 42 - currentMonth.length - whereMonday); res = [].concat(preArr, currentMonth, nextArr); // 上面經(jīng)過我本人的測試是沒有什么問題，接下來就是更新 dom 的信息的問題 let hadDom = document.getElementsByClassName(’date-item’); if (hadDom && hadDom.length) { let domArr = document.getElementsByClassName(’date-item’); for (let i = 0; i < domArr.length; i++) { domArr[i].innerHTML = res.shift(); } } else { // 如果之前沒有結(jié)構(gòu)的話 let str = ’’; for (let i = 0; i < 6; i++) { str += ’<div class='date-line'>’; for (let j = 0; j < 7; j++) { str += `<span class=’date-item’>${res.shift()}</span>`; if (j === 6) { str += ’</div>’; } } } document.getElementById(’dateWrap’).innerHTML = str; } }; updateCalendar(); // 添加上一月，下一月事件 let oPreButton = document.getElementById(’preMonth’); let oNextButton = document.getElementById(’nextMonth’); oPreButton.addEventListener(’click’, function () { let currentYear = +document.getElementById(’nowYear’).textContent; let currentMonth = +document.getElementById(’nowMonth’).textContent - 1; let currentDate = +document.getElementById(’nowDate’).textContent; if (currentMonth === 0) { updateCalendar(currentYear - 1, 11, currentDate); } else { updateCalendar(currentYear, currentMonth - 1, currentDate); } }); oNextButton.addEventListener(’click’, function () { let currentYear = +document.getElementById(’nowYear’).textContent; let currentMonth = +document.getElementById(’nowMonth’).textContent - 1; let currentDate = +document.getElementById(’nowDate’).textContent; if (currentMonth === 11) { updateCalendar(currentYear + 1, 0, currentDate); } else { updateCalendar(currentYear, currentMonth + 1, currentDate); } });</script></html>
發(fā)現(xiàn)用 dom 直接操作而不是通過 mvvm 框架實現(xiàn)確實還是比較蛋疼的，以下是這次實現(xiàn)的效果。
實現(xiàn)一個功能的時候，從數(shù)據(jù)的層面分析，有時候會比較容易理解
以上就是js實現(xiàn)日歷的詳細(xì)內(nèi)容，更多關(guān)于js 日歷的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
網(wǎng)公網(wǎng)安備