JS输出日历

浏览数：26 / 时间：2015年06月09日

页面HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JS输出日历</title>
    <style type="text/css">
        /* global css document => author:[email protected] */
        html{height:100%;-overflow-y:scroll;border:0}body{min-height:100%;-height:100%;position:relative}
        body,h1,h2,h3,h4,h5,h6,p,div,dl,dt,dd,ul,ol,li,form,button,input,textarea,th,td{margin:0;padding:0;border:0}
        h1,h2,h3,h4,h5,h6,select,input,textarea,button,table{font-size:100%;font-weight:normal}
        ul,ol,dl{list-style:none}a{text-decoration:none;color:#36c}u{text-decoration:none}i,em{font-style:normal}
        a:hover{text-decoration:underline}a img{border:none}a,select,input,textarea{outline:none}.fr{float:right}
        table{border-collapse:collapse;border-spacing:0}th{text-align:left;font-weight:normal}.fl{float:left}
        .cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{+zoom:1}
        body{color:#000;background:#fff;font:12px/15px Microsoft YaHei}

        #u-calender{padding:50px 0 0 200px}
        #u-calender #u-slt{font-size:14px}
        #u-slt select{font:13px Verdana}
        #u-calender .z-on{background:#36c;color:#fff; font-weight:700}
        #u-calender .z-pass{background:#efefef;color:#ccc}
        #u-calender table{ border-top:1px solid #ccc; border-right:1px solid #ccc; width:300px}
        #u-calender table tr td{ border-bottom:1px solid #ccc; border-left:1px solid #ccc;text-align:center;padding:5px 0}
    </style>
</head>
<body>
<div id="u-calender">
    <table class="calender"><tr><td colspan="7" id="u-slt"></td></tr><tr id="u-week"></tr></table>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="calendar.js"></script>
</div>
</body>
</html>

下面是calendar.js的代码

$(document).ready(function(){

    function createCalendar(year, month){

        var _Date = new Date(), _thenYear = _Date.getFullYear(), _thenMonth = _Date.getMonth() + 1, _thenDay = _Date.getDate();
        var aryMonth = [‘一‘, ‘二‘, ‘三‘, ‘四‘, ‘五‘, ‘六‘, ‘七‘, ‘八‘, ‘九‘, ‘十‘, ‘十一‘, ‘十二‘];
        var aryWeek = [‘日‘, ‘一‘, ‘二‘, ‘三‘, ‘四‘, ‘五‘, ‘六‘];

        // 年份
        var ech = 8;
        var _year = year ? parseInt(year) : _thenYear;
        var _selectYear = ‘&nbsp;&nbsp;年份:<select id="u-year">‘;
        for(var i = (_year + ech), n = (_year - ech); i >= n; i--){
            var _selected = (_year == i) ? ‘ selected="selected"‘ : ‘‘;
            _selectYear += ‘<option value="‘+ i +‘"‘+ _selected +‘>‘+ i +‘</option>‘;
        }
        _selectYear += ‘</select>‘;

        // 月份
        var _month = month ? parseInt(month) : _thenMonth;
        var _selectMonth = ‘月份:<select id="u-month">‘;
        for(var i = 0, n = aryMonth.length; i < n; i++){
            var _selected = (_month == (i+1)) ? ‘ selected="selected"‘ : ‘‘;
            _selectMonth += ‘<option value="‘+ (i+1) +‘"‘+ _selected +‘>‘+ aryMonth[i] +‘月</option>‘;
        }
        _selectMonth += ‘</select>&nbsp;&nbsp;‘;

        // 加入月份和年份的下拉控件
        $(‘#u-slt‘).html(_selectMonth + _selectYear);

        // 输出日期排序
        var _selectWeek = ‘‘;
        for(var i = 0, n = aryWeek.length; i < n; i++){
            _selectWeek += ‘<td>周‘+ aryWeek[i] +‘</td>‘;
        }
        $(‘#u-week‘).html(_selectWeek);

        // 当月的总天数 和 当月第一天是星期几
        var maxDay = _date(_year, _month);
        var first = _date(_year, _month, ‘firstDay‘);

        // 当月的总天数的数组
        var aryDay = _range(1, maxDay);

        // 第一排的空位数 用 上月后几位日期 填补
        if(first % 7 != 0){
            var prevDay = _date(_year, (_month - 1)); // 上月的总天数
            var aryFirst = _range(prevDay - first + 1, prevDay);
            aryDay = aryFirst.concat(aryDay);
        }

        // 最后排的空位数 用 下月的前几位日期填补
        var lenLast = aryDay.length, last = 7 - lenLast % 7;
        var aryLast = last % 7 == 0 ? ‘‘ : _range(1, last);
        if(aryLast != ‘‘) aryDay = aryDay.concat(aryLast);

        // 日期循环输出 且 写入Body
        var _trHtml = ‘<tr class="u-day">‘;
        for(var i = 0, n = aryDay.length; i < n; i++){
            var strDay = aryDay[i];
            var dayPass = (i < first || i >= lenLast) ? ‘ class="z-pass"‘ : ‘‘; // 上月或下月的日期变灰色
            var dayOn = (_year == _thenYear && _month == _thenMonth && strDay == _thenDay && dayPass == ‘‘) ? ‘ class="z-on"‘ : ‘‘;
            _trHtml += ‘<td‘+ dayOn + dayPass +‘>‘+ _sprintf(strDay) +‘</td>‘;
            if((i + 1) % 7 == 0) _trHtml += ‘</tr><tr class="u-day">‘;
        }
        _trHtml += ‘</tr>‘;
        _trHtml = _trHtml.replace(‘<tr class="u-day"></tr>‘, ‘‘);
        $(‘.calender‘).append(_trHtml);
    }

    // 默认加载日历
    createCalendar();

    // 下拉项的点击变换事件
    $(‘#u-year, #u-month‘).live(‘change‘, function(){
        var y = $(‘#u-year‘).val(), m = $(‘#u-month‘).val();
        $(‘.u-day‘).remove();
        createCalendar(y, m);
    });

    // 返回日历的信息值(当月或上月总天数，当月第一天是星期几)
    function _date(year, month, type){
        var ary = new Date(year, month, 0);
        if(type == ‘firstDay‘){
            ary.setDate(1);
            return ary.getDay();
        }else{
            return ary.getDate();
        }
    }

    // 创建日期的数组
    function _range(x, y){
        var ary = Array();
        var i = 0; // 必须从0开始，否则.length获取的长度不准确
        for(x; x <= y; x++){
            ary[i] = x;
            i++;
        }
        return ary;
    }

    // 补齐小于10的数值前的0
    function _sprintf(val){
        var str = val.toString();
        if(val < 10) str = ‘0‘ + str;
        return str;
    }
});