最近做的一个项目中,需要用到一个日历来记录你的签到,网上找了一些,感觉挺庞大的,所以就自己写了一个,记录一下自己写这个日历的经过
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其实还可以简化,这里就暂时不简化了。这个日历只是用来记录签到的
不可以自己选择月份,都是当前月的日历而已