最近做的一个项目中，需要用到一个日历来记录你的签到，网上找了一些，感觉挺庞大的，所以就自己写了一个，记录一下自己写这个日历的经过

html代码：

MonTueWedThuFriSatSun

css代码：

table {

border-collapse: separate;

border-width: 0px 0px 1px 1px;

margin: 10px auto;

font-size: 20px;

}

td, th {

width: 81px;

height: 45px;

text-align: center;

vertical-align: middle;

color: #5d6b7a;

position: relative;

font-size: 16px;

}

.thead th{

background-color: #ffa6a6;

color: white;

height: 50px;

font-weight: bold;

font-size: 14px;

}

/*匹配所有表格的奇数行*/

tbody tr:nth-child(2n+1){

background: #fff;

}

/*匹配所有的偶数行*/

tbody tr:nth-child(2n){

background:#f5f8fc;

}

js代码如下：

var today = new Date();

today.setDate(1);

// 获取每个月的第一天是星期几，这样决定日历在开始的位置

var week = today.getDay();

//获取当前月最后一天时间

var last=new Date(today.getFullYear(), today.getMonth()+1,0);

// 获取最后一天是几号

var lastDate=last.getDate();

// 每个月1号的起始位置。比如1号时星期2，那么第一行就缩进1格，所以是week-1;

$('tbody tr').eq(0).find('td:first').attr('colspan',week-1);

var firstNum=Number(7-week+1); //1号往后的位置还有多少天，+1是因为求出的星期几时起始位置

//每一行的数字

var firstLine='';

var secondLine='';

var thirdLine='';

var fourLine='';

var fiveLine='';

//第一个星期天数

for(var i=0;i

firstLine+='

'+(i+1)+'';

}

// 第二个星期天数

for(var i=firstNum;i

secondLine+='

'+(i+1)+'';

}

// 第三个星期天数

for(var i=firstNum+7;i

thirdLine+='

'+(i+1)+'';

}

// 第四个星期天数

for(var i=firstNum+7+7;i

fourLine+='

'+(i+1)+'';

}

//如果 有第五个星期，因为不是从1号不是星期一算起的，所以可能有第五个星期

if(lastDate-firstNum+7+7+7+7>0){

for(var i=firstNum+7+7+7;i

fiveLine+='

'+(i+1)+'';

}

$('.fiveLine').append(fiveLine);

}

$('.firstLine').append(firstLine);

$('.secondLine').append(secondLine);

$('.thirdLine').append(thirdLine);

$('.fourLine').append(fourLine);

上面的做法可以做出一个正常的日历，不过有点傻瓜式的。不过观察js，我们可以发现这样的规律

就是for循环后面的 i +有一定规律的，每次都是+7的倍数。所以，我们整理一下，将上面的代码变成：

改变后：

html代码变为：

MonTueWedThuFriSatSun

css代码保持不变：

table {

border-collapse: separate;

border-width: 0px 0px 1px 1px;

margin: 10px auto;

font-size: 20px;

}

td, th {

width: 81px;

height: 45px;

text-align: center;

vertical-align: middle;

color: #5d6b7a;

position: relative;

font-size: 16px;

}

.thead th{

background-color: #ffa6a6;

color: white;

height: 50px;

font-weight: bold;

font-size: 14px;

}

/*匹配所有表格的奇数行*/

tbody tr:nth-child(2n+1){

background: #fff;

}

/*匹配所有的偶数行*/

tbody tr:nth-child(2n){

background:#f5f8fc;

}

js代码改变为：

var today = new Date();

today.setDate(1);

// 获取每个月的第一天是星期几，这样决定日历在开始的位置

var week = today.getDay();

//获取当前月最后一天时间

var last=new Date(today.getFullYear(), today.getMonth()+1,0);

// 获取最后一天是几号

var lastDate=last.getDate();

//1号的位置还有多少天，+1是因为求出的星期几时起始位置

var firstNum=Number(7-week+1);

var y = last.getYear();

var m = last.getMonth()+1;

var d = last.getDate();

//获取当前月一共有几周

var weekNum=getMonthWeek(y, m, d);

for(var i=0;i

var dateList='';

var trList='';

//第一个星期和最后一个星期分开处理

//第一个星期

if(i<1){

for(var k=0;k

dateList+='

'+(k+1)+'';

}

trList='

'+dateList+'';

}else if(i

for(var k=firstNum+7*(i-1);k

dateList+='

'+(k+1)+'';

}

trList='

'+dateList+'';

//最后一个星期

}else{

for(var k=firstNum+7*(i-1); k

dateList+='

'+(k+1)+'';

}

trList='

'+dateList+'';

}

$('#tbody').append(trList);

}

//获取当前月一共有几周的函数

function getMonthWeek (a, b, c) {

var date = new Date(a, parseInt(b) - 1, c);

var w = date.getDay();

var d = date.getDate();

return Math.ceil((d + 6 - w) / 7);

};

最后的效果图如下：当然样式要自己处理一下。最后部分的js其实还可以简化，这里就暂时不简化了。这个日历只是用来记录签到的

不可以自己选择月份，都是当前月的日历而已