最近在做前端的东西比较多,为更好的掌握的前端技能水平,想通过写web前端组件来提供前端代码能力,第一个组件选了Windows 7右下角的日历为模仿对象
效果如下
Javascript代码
<script type="text/javascript"> var weekAry = ['日', '一', '二', '三', '四', '五', '六']; var monthAry = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']; var currentYear; var currentMonth; var navYear; var attachParent = null; var sourcePosition; //月份模式选择时的年 $(document).ready(function() { $('#birthday').bind('focus', function() { attachParent = $(this); sourcePosition = $(this).offset(); var showDate = new Date(); render_calendar(); }); $('#birthday').bind('focusout', function() { //$("#cal").hide(); }); $('#n_img').bind('click', function() { var neighboring = neighboringMonth(currentYear, currentMonth, 'n'); render_calendar(new Date(neighboring.year, neighboring.month - 1, 1)); }); $('#p_img').bind('click', function() { var neighboring = neighboringMonth(currentYear, currentMonth, 'p'); render_calendar(new Date(neighboring.year, neighboring.month - 1, 1)); }); $(document).bind('keypress', function(event) { if($('#cal').css('display') == 'block') { if(event.keyCode == 27) {//ESC $('#cal').hide(); } else if(event.keyCode == 33) {//Page Up var neighboring = neighboringMonth(currentYear, currentMonth, 'p'); render_calendar(new Date(neighboring.year, neighboring.month - 1, 1)); } else if(event.keyCode == 34){//Page Down var neighboring = neighboringMonth(currentYear, currentMonth, 'n'); render_calendar(new Date(neighboring.year, neighboring.month - 1, 1)); } } }); }); //点击 从输入框中获取日期,然后弹出日历框 跳到对应日期 如果日期为空则为当天日期 function show_calendar(input) { } //画日历 function render_calendar(to_showday) { $("#cal_tab thead tr").remove(); $("#cal_tab tbody tr").remove(); $('#yms').html(""); var showday = to_showday || new Date(); var year = showday.getFullYear(); var month = showday.getMonth() + 1; var day = showday.getDate(); var dayOfWeek = showday.getDay(); //星期几 currentYear = year; currentMonth = month; navYear = year; $("#cal_tab thead").append('<tr></tr>'); for(var i = 0; i < weekAry.length; i++) { $("#cal_tab thead tr").append('<td>' + weekAry[i] + '</td>'); } var firstDay = new Date(year, month - 1, 1); //日历显示月的1号 var firstDayOfWeek = firstDay.getDay(); //一号是星期几 var days = getDaysOfMonth(year, month); var lastMonthDays = month == 1 ? getDaysOfMonth(year - 1, 12) : getDaysOfMonth(year, month - 1); //前一个月有几天 var dayArry = []; //上一个月 var lastMonthBegin = firstDayOfWeek == 0 ? 7 : firstDayOfWeek; for(var i = lastMonthBegin - 1; i >= 0; i--) { dayArry.push(lastMonthDays - i); } //当前月 for(var i = 1; i <= days; i++) { dayArry.push(i); } //下个月 var leftDay = 42 - dayArry.length; for(var i = 1; i <= leftDay; i++) { dayArry.push(i); } //生成当前月 $("#cal_tab tbody").append('<tr></tr>'); for(var i = 0; i < 42; i++) { if(i <= lastMonthBegin - 1) { $("#cal_tab tbody tr:last").append("<td class='pm d_cell'>" + dayArry[i] + "</td>"); } else if(i < lastMonthBegin + days) { $("#cal_tab tbody tr:last").append("<td class='cm d_cell'>" + dayArry[i] + "</td>"); } else { $("#cal_tab tbody tr:last").append("<td class='nm d_cell'>" + dayArry[i] + "</td>"); } if(i != 0 && (i + 1) % 7 == 0) { $("#cal_tab tbody").append('<tr></tr>'); } } $('#cal_tab tbody tr td').bind('click', function() { if($(this).hasClass('pm')) { var neighboring = neighboringMonth(currentYear, currentMonth, 'p'); $('#birthday').val(neighboring.year + '-' + neighboring.month + '-' + $(this).text()); $('#cal').hide(); } else if($(this).hasClass('cm')) { $('#birthday').val(currentYear + '-' + currentMonth + '-' + $(this).text()); $('#cal').hide(); } else { var neighboring = neighboringMonth(currentYear, currentMonth, 'n'); $('#birthday').val(neighboring.year + '-' + neighboring.month + '-' + $(this).text()); $('#cal').hide(); } }); $('#yms').bind('click', showYearTable); $('#yms').html(year + "年" + month + "月"); if(sourcePosition != null){ $("#cal").css({'left':sourcePosition.left,'top':sourcePosition.top+20,'position':'absolute'}); } else { } $("#cal").show(); $("#day_cal").show(); } function showYearTable() { $('#day_cal').hide(); $('#month_cal table tr').remove(); $('#yyyy').html(navYear + '年'); $('#month_cal table').append('<tr></tr>'); for(var i = 0; i < monthAry.length; i++) { $('#month_cal table tr:last').append("<td class='m_cell' m='" + (i + 1) + "'>" + monthAry[i] + "</td>"); if((i + 1) % 4 == 0 && i != monthAry.length - 1) { $('#month_cal table').append('<tr></tr>') } } // py_img ny_img $('#py_img').unbind('click'); $('#py_img').bind('click', function() { navYear = navYear - 1; showYearTable(); }); $('#ny_img').unbind('click'); $('#ny_img').bind('click', function() { navYear = navYear + 1; showYearTable() }); $('.m_cell').unbind('click'); $('.m_cell').bind('click', function() { var m = $(this).attr('m'); $('#month_cal').hide(); $('#day_cal').show(); render_calendar(new Date(navYear, parseInt(m) - 1, 1)); }); $('#cal').show(); $('#month_cal').show(); } /** * flag 'n' or 'p' */ function neighboringMonth(year, month, flag) { if(flag === 'n') { var nYear = month === 12 ? year + 1 : year; var nMonth = month === 12 ? 1 : month + 1; return { 'year' : nYear, 'month' : nMonth }; } else { var nYear = month === 1 ? year - 1 : year; var nMonth = month === 1 ? 12 : month - 1; return { 'year' : nYear, 'month' : nMonth }; } } function getDaysOfMonth(year, month) { var dayOfMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var dayOfMonthLeap = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; if(year % 100 == 0 && year % 400 == 0) { return dayOfMonthLeap[month - 1]; } else if(year % 4 == 0) { return dayOfMonthLeap[month - 1]; } else { return dayOfMonth[month - 1]; } } </script>
html代码
<body>
<h1>仿Windows 7 日历</h1>
<form style="position: absolute;top:60px;left: 50px;">
<label for="birthday">生日</label>
<input type="text" style="width: 100px;" class="date_select" id="birthday"/>
<label for="birthday">名字</label>
<input type="text" style="width: 100px;" class="date_select" id="yourname"/>
</form>
<div id="cal" style="width: 175px;height: 150px;display: none;">
<div id="day_cal">
<div><img src="img/p_month.jpg" id="p_img"/><span id="yms" style=""></span><img src="img/n_month.jpg" id="n_img"/>
</div>
<table id="cal_tab">
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="month_cal">
<div><img src="img/p_month.jpg" id="py_img"/><span id="yyyy"></span><img src="img/n_month.jpg" id="ny_img"/>
</div>
<table id="month_tab"></table>
</div>
</div>
</body>
日历组件代码还需要改进,包括功能改进、如何被其它页面调用等,有空再继续完善