<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table> <thead> <tr> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> <th>星期七</th> </tr> </thead> <tbody> </tbody> </table> <script> function showMonth(year, month) { var firstDay = new Date(year, month - 1, 1) var lastDay = new Date(year, month, 0) var lastDayOfLastMonth = new Date(year, month - 1, 0).getDate() var weekOfFirstDay = firstDay.getDay() var weekOfLastDay = lastDay.getDay() if (weekOfFirstDay === 0) { weekOfFirstDay = 7 } if (weekOfLastDay === 0) { weekOfLastDay = 7 } var allDay = [] var _weekOfFirstDay = weekOfFirstDay for (var i = firstDay.getDate(), l = lastDay.getDate() + 1; i < l; i++) { var oneDay = {} oneDay.day = i oneDay.week = _weekOfFirstDay allDay.push(oneDay) if (++_weekOfFirstDay > 7) { _weekOfFirstDay = 1 } } var dayOfLastMonth = lastDayOfLastMonth for (var l = weekOfFirstDay; --l;) { var oneDay = {} oneDay.day = dayOfLastMonth oneDay.week = l allDay.unshift(oneDay) dayOfLastMonth-- } var dayOfNextMonth = 1 for (var i = weekOfLastDay + 1, l = 8; i < l; i++) { var oneDay = {} oneDay.day = dayOfNextMonth++ oneDay.week = i allDay.push(oneDay) } var html = '' for (var i = 0, l = allDay.length; i < l; i++) { var oneDay = allDay[i] if (oneDay.week == 1) { html += '<tr>' html += '<td>' + oneDay.day + '</td>' } else if (oneDay.week == 7) { html += '<td>' + oneDay.day + '</td>' html += '</tr>' } else { html += '<td>' + oneDay.day + '</td>' } } document.querySelector('tbody').innerHTML = html } showMonth(2015, 6) </script> </body> </html>
function showMonth(shadowRoot, year, month) { var today = new Date(), firstDay, lastDay, lastDayOfLastMonth, firstValInTable, weekOfFirstDay, rowCount, tempHTML = '', originalDate originalDate = today if(typeof year === 'undefined') { year = today.getFullYear() } if(typeof month === 'undefined') { month = today.getMonth() + 1 } firstDay = new Date(year, month-1, 1) lastDay = new Date(year, month, 0) lastDayOfLastMonth = new Date(year, month-1, 0).getDate() year = firstDay.getFullYear() month = firstDay.getMonth() + 1 weekOfFirstDay = firstDay.getDay() if(weekOfFirstDay === 0) { weekOfFirstDay = 7 } // 有多少天减掉1 加上第一天是周几 周三就周一周二周三三天加 rowCount = Math.ceil(((lastDay - firstDay)/1000/3600/24 +weekOfFirstDay)/7) // 表格第1个的值 // 如果是 5 0,-1,-2,-3 -5+2 firstValInTable = -weekOfFirstDay + 2 for(var i = 0; i < rowCount; i++) { tempHTML += '<tr>' for(var j = 0; j < 7; j++) { var day = firstValInTable + 7 * i + j, showDay = day, weekendClass, monthClass, todayClass if(month === originalDate.getMonth() + 1 && day === originalDate.getDate()) { todayClass = 'current' } else { todayClass = '' } if(j === 7-1){ weekendClass = 'sunday' } else if (j === 6-1) { weekendClass = 'saturday' } else { weekendClass = '' } if(day <= 0) { showDay = day + lastDayOfLastMonth monthClass = 'prevmonth' } else if (day > lastDay.getDate()) { showDay = day - lastDay.getDate() monthClass = 'nextmonth' } else { monthClass = '' } tempHTML += '<td tabindex="0" class="'+todayClass+' '+weekendClass+' '+monthClass+'" data-value="'+day+'">'+showDay+'</td>' } tempHTML += '</tr>' } shadowRoot.querySelector('.year').innerText = year shadowRoot.querySelector('.month').innerText = month shadowRoot.querySelector('tbody').innerHTML = tempHTML }