写一个签到日历

最近项目上写了一个签到页面,其中有一个功能设计的是点击签到，可以查看签到日历，稍微麻烦点的是连续签到的日期间有横线连接，现在总结记录一下：

效果

需求

1. 只显示当前月份的签到日历（其实基于目前的代码扩展部分可以实现全年的日历）
2. 后台提供已经签到天数

具体代码

第1步：HTML布局

最后的展示效果的html代码

        

            
日
            
一
            
二
            
三
            
四
            
五
            
六
            

            

            

            
1
            
2
            
1
            
2
            
1
            
2
            
1
            
2
            
1
            
2
            
1
            
2
            
1
            
2
            
1
            
2
            
28
            
1
            
2
            
2
            
28
            
1
            
2
            
2
            
28
            
28
            
28
            
28
            
29
            
30
            
31
        

第2步：Css布局
此处css处理了当连续签到时两个日期之间需要有黄色线条连接，日历四周不能有额外的黄线线条，下面css代码就是针对此要求的处理。

.ck-bg .cale-warp ul li:nth-of-type(7n) p.succe i{
    background:transparent;
}
.ck-bg .cale-warp ul li:last-of-type p.succe i{
    background:transparent;
}
.ck-bg .cale-warp ul li:nth-of-type(1),
.ck-bg .cale-warp ul li:nth-of-type(2),
.ck-bg .cale-warp ul li:nth-of-type(3),
.ck-bg .cale-warp ul li:nth-of-type(4),
.ck-bg .cale-warp ul li:nth-of-type(5),
.ck-bg .cale-warp ul li:nth-of-type(6),
.ck-bg .cale-warp ul li:nth-of-type(7){
    background:rgba(248,248,248,1);
    font-size: 0.24rem;
    color:rgba(127,127,127,1);
}

其他代码

.ck-bg .cale-warp ul{margin:0 auto;width:5.95rem;height:5.1rem;overflow:hidden}
.ck-bg .cale-warp ul li{display:flex;justify-content:center;align-items:center;float:left;position:relative;width:0.85rem;height:0.85rem;line-height:0.85rem;text-align:center;font-size:0.28rem;color:#000}
.ck-bg .cale-warp ul li p{width:0.56rem;height:0.56rem;line-height:0.56rem;text-align:center;border-radius:100%}
.ck-bg .cale-warp ul li p i{position:absolute;top:0.34rem;left:-.145rem;background:rgb(255,255,255);width:0.42rem;height:0.18rem;right:unset}
.ck-bg .cale-warp ul li p.succe{background:rgba(248,190,69,1);color:#fff}
.ck-bg .cale-warp ul li p.succe i{position:absolute;top:0.365rem;right:-0.2rem;background:rgba(248,190,69,1);width:0.4rem;height:0.12rem;left:unset}
.ck-bg .cale-warp ul li p.failed:after{content:"！";color:red;position:absolute;top:-.05rem;right:0;font-weight:bold}

第3步：代码

如果当前年份能被4整除但是不能被100整除或者能被400整除，即可确定为闰年，返回1，否则返回0

function isLeap(year) {
    return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
}

//获取当前时间
var nowYear = 2018;
var nowMonth = 7;
var nowDay = 31;
var nowweekDay = 2;
//从后台获取签到日期
var signDate = [0,1,2,3,4,5,6,7,8,9,,18,19,23,24,25,26,27,28,29,30,31];

获取每个月的天数

var days_per_month = new Array(31, 28 + isLeap(nowYear), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

var dateHtml = "
日
一
二
三
四
五
六
";

计算当月1号的位置

var blank = nowweekDay - (nowDay % 7) + 1;
if(blank<0) blank = 7 + blank; 
for(var i = 0; i < blank; i++) {
    dateHtml += "
";
}

拼接

var dateHtmlp = "";
for(var j = 1; j <= days_per_month[nowMonth - 1]; j++) {
    for(var n = 1; n < signDate.length; n++) {
        if(j == signDate[n]) {
            dateHtmlp = "
" + j + "
";
            break
        } else {
            if(j < signDate[signDate.length - 1]) {
                dateHtmlp = "
" + j + "
";
            } else {
                dateHtmlp = "
" + j + "
";
            }
        }
    }
    dateHtml += "
" + dateHtmlp + "
";
}