<!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
}