<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>日曆</title ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>日曆</title> <style> table { width: 320px; background: #333; color: #fff } td, th { text-align: center; height: 30px; } </style> </head> <body> <table> <thead> <tr> <th colspan="2"> <span class="left"><<</span> </th> <th colspan="3"> <span class="time"></span> </th> <th colspan="2"> <span class="right">>></span> </th> </tr> <tr> <th>日</th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th>六</th> </tr> </thead> <tbody class="main"></tbody> </table> <script> // 獲取元素 let oTime = $('.time') let oMain = $('.main') let leftBtn = $('.left') let rightBtn = $('.right') let time = new Date() createCells() // 1. 創建表格 getPrevDays(time) // 2.獲取上一個月占的格子 getCurrentDays(time); // 3.獲取當前月所占的格子數 minHead(time) // 4.設置頭部顯示的內容 mainList(time, getPrevDays(time), getCurrentDays(time)) // 5. 月份顯示的詳情 leftBtn.onclick = function() { // 6.綁定兩邊的按鈕 實現上一月下一月 time.setMonth(time.getMonth() - 1) getPrevDays(time) getCurrentDays(time) minHead(time) mainList(time, getPrevDays(time), getCurrentDays(time)) } rightBtn.onclick = function() { time.setMonth(time.getMonth() + 1) getPrevDays(time) getCurrentDays(time) minHead(time) mainList(time, getPrevDays(time), getCurrentDays(time)) } /* * * 獲取元素 * */ function $(container) { return document.querySelector(container) } /* * * 創建表格 * */ function createCells() { for (var i=0; i<6; i++) { var tr = document.createElement('tr') for(var k=0; k<7; k++) { var td = document.createElement('td') tr.appendChild(td) } oMain.appendChild(tr) } } /* * * getPrevDays 獲取上一個月 占的格子 * */ function getPrevDays(time) { var time = new Date(time) // 拷貝一份時間 防止修改時間引發衝突 var list = [] // 上一個月所占的天數 time.setDate(1) // 設置為當月第一天方便查看是星期幾 var day = time.getDay() == 0 ? 7 : time.getDay() // 如果是0 說明需要空出來一行 顯示上個月的時間 // 獲取上一個月的天數 time.setDate(0) var maxDay = time.getDate() for(var i=maxDay; i> (maxDay-day); i--) { list.push(i) } list.reverse() return list } /* * 獲取當月所占的格子 */ function getCurrentDays(time) { // debugger var time = new Date(time) // 拷貝一份時間 防止修改時間造成全局時間衝突 time.setDate(1) // 確保不會出現跨越現象 比如1.31跑到三月份去了 var list = [] // 下麵的代碼是為了獲取當前月的信息 time.setMonth(time.getMonth() + 1) console.log(time.getMonth()) time.setDate(0) // 修改日期0 var maxDay = time.getDate() // 獲取當月的天數 for(var i=1; i<=maxDay; i++) { list.push(i) } return list } /* * minHead 設置頭部的顯示 */ function minHead(time) { // oTime.innerHTML = time.getFullYear() + '年' + time.getMonth() + 1 oTime.innerHTML = `${time.getFullYear()}年${time.getMonth() + 1}月` } function getYMD(time) { time = time || new Date() return `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}` } /* * 月份顯示的詳情 上個月最後 + 本月 + 下個月開始的 */ function mainList(time, prevDays, currentDays) { var beforeCount = prevDays.length + currentDays.length var cellList = document.querySelectorAll('td') // 1. 展示上個月的 for(var i=0; i<prevDays.length; i++) { cellList[i].innerHTML = `<font color='red'>${prevDays[i]}</font>` } // 2. 展示本月的 for(var i=0; i<currentDays.length; i++) { if (getYMD() === getYMD(time) && currentDays[i] == time.getDate()) { // 如果是今天 展示另外一種顏色 cellList[i + prevDays.length].innerHTML = `<font color='yellow'>${currentDays[i]}</font>` } else { cellList[i + prevDays.length].innerHTML = `<font color='white'>${currentDays[i]}</font>` } } // 3. 展示下個月的 for(var i=1; i< (42-beforeCount); i++) { cellList[i + beforeCount - 1].innerHTML = `<font color='red'>${i}</font>` } } </script> </body> </html>
