今天分享一个日简单历的制作，主要讲解一下jQuery方面的思路，如何实现一个能切换时间的日历，样式方面相信自己做能做的更好。 先上图： 简单看一下html结构：
<div class="box"> <div class="top"> <div class="pre"></div> <div class="next"></div> <div class="time"> <span id="year"></span>年<span id="month"></span>月<span id="date"></span>日 </div> </div> <table cellspacing="10"> <tr> <th class="relax">日<i>休</i></th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th class="relax">六<i>休</i></th> </tr> </table> </div>上图，方便理解: 基础样式很容易就能完成，随便写写都能达到上图效果。通过观察html的代码发现，我只给table设置一行内容，就是日期（日，一，二…）那一行，下面的日期都是通过jquery实现的，ok，接下来说jquery部分。
//闰年与非闰年数组 var arr1 = [31,28,31,30,31,30,31,31,30,31,30,31]; var arr2 = [31,29,31,30,31,30,31,31,30,31,30,31]; var date = new Date();//获取时间对象 var year = date.getFullYear();//求年份 var month = date.getMonth()+1;//求月份 //设置表格 function setTable() { var getDate = date.getDate();//获取当前是本月的第几天 用于后面设置当天样式 var oldTime = new Date(year+'-'+month+'-01');//设置时间 var firstDay = oldTime.getDay();//求设置时间第本月第一周是第几天 var lastMonth = month-1;//上一个月 用来得出日历第一行白色天数 if(lastMonth == 0){ lastMonth = 12; } var lastDay = 0; var count = 0; var arr3 = [];//此数组存储日历中上一个月份与下一个月份出现的那些天 //count设值 if(year % 4 == 0 && year % 100 ==0 ){ count = arr1[month-1]; lastDay = arr1[lastMonth-1]; }else{ count = arr2[month-1]; lastDay = arr2[lastMonth-1]; } //设置数组 按顺序存储 for(var n = 0; n < firstDay; n++){ arr3.unshift(lastDay);//插入元素至数组头部 lastDay--; } var lastDay = 0; for(var m = 0; m < 42 - count - firstDay; m++){ lastDay++; arr3.push(lastDay);//插入元素至数组尾部 } //设置年月日 $('#year').html(year); $('#month').html(month); $('#date').html(getDate); //清空表格 $('tr:gt('+(0)+')').remove(); var text = null; //设置表格 var num = 1; for(var i = 0; i < 6; i++){//日历一共六行 循环六次 $('<tr></tr>').appendTo('table');//插入行 for(var j = 0; j < 7; j++){ //插入td if(firstDay == j && i == 0){//信号量 如果第一周某一天等于之前求得的本月第一天是周几，便从此次开始插入本月天数 //插入本月天数 并设置本月天数有的className 具备样式 $('<td></td>').html(num).addClass('key').appendTo('tr:eq('+(i+1)+')').click(function () { $('td').removeClass('active'); $(this).addClass('active'); text = $(this).html(); $('#date').html(text); }); //设置当天的样式 如果num等于这天是本月的第多少天 则设置当天样式 if(num == getDate){ for (var k = 0; k < $('td').length; k++){ if($('td').eq(k).html() == getDate){ $('td').eq(k).addClass('active'); } } } num++; }else if( num != 1 && num <= count){//信号量改变 开始插入本月天数 $('<td></td>').html(num).addClass('key').appendTo('tr:eq('+(i+1)+')').click(function () { $('td').removeClass('active'); $(this).addClass('active'); text = $(this).html(); $('#date').html(text); }); //设置当天的样式 if(num == getDate){ for (var k = 0; k < $('td').length; k++){ if($('td').eq(k).html() == getDate){ $('td').eq(k).addClass('active'); } } } num++; }else{ //插入元素并设置上一个月与下一个月的样式 $('<td></td>').html(arr3[0]).addClass('last').appendTo('tr:eq('+(i+1)+')'); //插入玩删除数组中第一个元素 arr3.shift(); } } } }; setTable(); //上一个月 $('.pre').click(function () { month--; if(month == 0){ month = 12; year--; } setTable(); }).mousedown(function () { $(this).css({ opacity : 1, }); }).mouseup(function () { $(this).css({ opacity: 0.4, }); }); //下一个月 $('.next').click(function () { month++; if(month == 13){ month = 1; year++; } setTable(); }).mousedown(function () { $(this).css({ opacity : 1, }); }).mouseup(function () { $(this).css({ opacity: 0.4, }); });关键思想就是求出当前月份第一天在那个（一定是第一个）星期是第几天，知道月份就知道了有多少天，例如当前月份第一天在第一个星期是第2天，那么for循环当外层循环 i=0 && 里层循环 j=1时，开始插入浅蓝色样式的td标签。上一个月与下一个月的点击事件也不过是重复这个过程，并不难懂。 代码有点多，看起来可能有点乱，深蓝色的是当天样式，浅蓝色的是本月天的样式，浅白色就是上一个月与下一个月的样式，无非就是背景色，透明度的变化，很容易设置。每次调用中间删除行很关键，不然table中的行就越来越多了。本人小白，有问题可以指出，欢迎评论。
