【原】js 签到用日历
最近做的一个项目中，需要用到一个日历来记录你的签到，网上找了一些，感觉挺庞大的，所以就自己写了一个，记录一下自己写这个日历的经过
html代码：
<table cellspacing="0"> <thead> <tr class="thead"> <th>Mon</th>
<th>Tue</th>
<th>Wed</th> <th>Thu</th>
<th>Fri</th>
<th>Sat</th> <th>Sun</th> </tr> </thead>
<tbody id="tbody">
<!--因为一个月最多五个星期--> <tr class="firstLine"> <td colspan=""></td>
</tr> <tr class="secondLine"></tr> <tr class="thirdLine"></tr> <tr class="fourLine"></tr> <tr class="fiveLine"></tr> </tbody>
</table>
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<firstNum;i++){
firstLine+='<td>'+(i+1)+'</td>';
}
// 第二个星期天数
for(var i=firstNum;i<firstNum+7;i++){
secondLine+='<td>'+(i+1)+'</td>';
}
// 第三个星期天数
for(var i=firstNum+7;i<firstNum+7+7;i++){
thirdLine+='<td>'+(i+1)+'</td>';
}
// 第四个星期天数
for(var i=firstNum+7+7;i<firstNum+7+7+7;i++){
fourLine+='<td>'+(i+1)+'</td>';
}
//如果 有第五个星期，因为不是从1号不是星期一算起的，所以可能有第五个星期
if(lastDate-firstNum+7+7+7+7>0){
for(var i=firstNum+7+7+7;i<lastDate;i++){
fiveLine+='<td>'+(i+1)+'</td>';
}
$('.fiveLine').append(fiveLine);
}
$('.firstLine').append(firstLine);
$('.secondLine').append(secondLine);
$('.thirdLine').append(thirdLine);
$('.fourLine').append(fourLine);
上面的做法可以做出一个正常的日历，不过有点傻瓜式的。不过观察js，我们可以发现这样的规律
就是for循环后面的 i +有一定规律的，每次都是+7的倍数。所以，我们整理一下，将上面的代码变成：
改变后：
html代码变为：
<table cellspacing="0"> <thead> <tr class="thead"> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </thead> <tbody id="tbody"></tbody> </table>
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<weekNum;i++){
var dateList='';
var trList='';
// 第一个星期和最后一个星期分开处理
// 第一个星期
if(i<1){
for(var k=0;k<firstNum;k++){
dateList+='<td style="background:#fff;">'+(k+1)+'</td>';
}
trList='<td style="background:#fff;" colspan="'+(week-1)+'">'+dateList+'</td>';
}else if(i<(weekNum-1)){
for(var k=firstNum+7*(i-1);k<firstNum+7*i;k++){
dateList+='<td>'+(k+1)+'</td>';
}
trList='<tr>'+dateList+'</td>';
// 最后一个星期
}else{
for(var k=firstNum+7*(i-1); k<lastDate;k++){
dateList+='<td>'+(k+1)+'</td>';
}
trList='<tr>'+dateList+'</td>';
}
$('#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其实还可以简化，这里就暂时不简化了。这个日历只是用来记录签到的
不可以自己选择月份，都是当前月的日历而已
