showMonth

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

}

巴特西

showMonth

最新文章

热门文章