【原】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其实还可以简化，这里就暂时不简化了。这个日历只是用来记录签到的

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