原生js实现的简单日历 月历

 JavaScript  2018-08-12  admin  2725  3678

原生js实现的简单日历 月历

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <style type="text/css">
        #dateMonth {
            width: 600px;
            margin-top: 50px;
            cursor: pointer
        }

        #dateMonth th {
            height: 40px;
            width: 40px;
        }

        #monthList {
            width: 600px;
            background-color: #9cd5ff;
            margin: 0 auto;
        }

        #dateMonth .today {
            background-color: #5dffa8;
            font-size: 20px;
            font-weight: bolder;
            color: red;
        }
    </style>
</head>
<body>
<div id="monthList">
</div>
<script type="text/javascript">
    var now = new Date();
    var nowYear = now.getFullYear();
    var nowMonth = now.getMonth();
    var nowDay = now.getDate();
    var beginOfWeek = 0; //每周默认开始周几
    var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

    createMonthList(nowMonth);

    /**
     * 生成日历
     * @param inputMonth
     */
    function createMonthList(inputMonth) {

        var date = new Date(nowYear, inputMonth, 1);
        var str = "<table border='1' cellspacing='0' id='dateMonth'>";
        str += "<tr><th onclick='preMonth()'><<</th></th><th colspan='5'>" + date.getFullYear() + "年" + (parseInt(date.getMonth()) + 1) + "月</th><th onclick='nextMonth()'>>></th></tr>";
        //var str3 = "<tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期天</th></tr>";
        var str3 = "<tr>";
        for (var i = 0, len = week.length; i < len; i++) {
            str3 += "<th>" + week[(i + beginOfWeek) % 7] + "</th>";
        }
        str3 += "</tr>";
        //获取月的天数
        var date2 = new Date(nowYear, inputMonth + 1, 0);
        var monthOfDay = date2.getDate();
        //获取1号星期几,
        var day = (date.getDay() + (7 - beginOfWeek)) % 7;
        var sum = monthOfDay + day;
        var tr = '';
        var dayNum = 1;
        while (sum % 7 != 0) {
            sum++;
        }
        for (var i = 1; i <= sum; i++) {
            if (i % 7 == 1) {
                tr += "<tr>";
            }
            if (i <= day || dayNum > monthOfDay) {
                tr += "<th>&nbsp;</th>";
            } else {
                if (date.getFullYear() == nowYear && date.getMonth() == nowMonth && nowDay == dayNum) {
                    tr += "<th>" + dayNum + "</th>";
                } else {
                    tr += "<th>" + dayNum + "</th>";
                }
                dayNum++;
            }
            if (i % 7 == 0) {
                tr += "</tr>";
            }
        }
        var str2 = "</table>";
        var hidden = "<input type='hidden' id='currentMonth' value='" + inputMonth + "' /> ";
        var all = str + str3 + tr + str2;
        document.getElementById('monthList').innerHTML = all + hidden;
    }

    //上一个月
    function preMonth() {
        var currentMonth = document.getElementById("currentMonth").value;
        createMonthList(parseInt(currentMonth) - 1);
    }

    //下一个月
    function nextMonth() {
        var currentMonth = document.getElementById("currentMonth").value;
        createMonthList(parseInt(currentMonth) + 1);
    }
</script>
</body>
</html>


calendar.zip