页面HTML代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS输出日历</title> <style type="text/css"> /* global css document => author:intval@163.com */ 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; 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 = ' 年份:<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> '; // 加入月份和年份的下拉控件 $('#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; } });
代码完成后实现的效果截图：
