最近做的一個項目中，需要用到一個日歷來記錄你的簽到，網上找了一些，感覺挺龐大的，所以就自己寫了一個，記錄一下自己寫這個日歷的經過
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其實還可以簡化，這里就暫時不簡化了。這個日歷只是用來記錄簽到的
不可以自己選擇月份，都是當前月的日歷而已
