连续签到html,前端这种连续签到的效果要怎么写

后端返回数据&＃xff1a; $data &＃61; [&＃39;month&＃39;&＃61;>&＃39;2017-08&＃39;,&＃39;date&＃39;&＃61;>&＃39;1,2,3,7,11&＃39;]

month: 当前月份&＃xff1b;

data:签到的日期;

前端处理数据&＃xff1a;首先根据date里返回的值将每个对应的日期给到class使其变亮&＃xff0c;然后再在each中判断当前元素的上级

元素是否为点亮状态&＃xff0c;如果为真则将红线显示出来&＃xff0c;下级元素同理。

示例代码&＃xff1a;

js代码&＃xff1a;

var data &＃61; {&＃39;month&＃39;:&＃39;2017-08&＃39;,&＃39;date&＃39;:[1,2,4,6]};

$.each(data.date,function(i,n){

$(&＃39;.date&＃39;).each(function () {

//给到签到日期的点亮class

$(this).html() &＃61;&＃61; n ? $(this).addClass(&＃39;on&＃39;):$(this).addClass(&＃39;off&＃39;);

})

});

$(&＃39;.data&＃39;).each(function(){

if($(this).hasClass(&＃39;off&＃39;)){

var num &＃61; $(this).html();

//当该元素为未点亮时将其横线隐藏

$(&＃39;.line span[data-id&＃61;"&＃39;&＃43;num&＃43;&＃39;"&＃39;).hide();

if(num !&＃61; 1 || num!&＃61;30){

$(&＃39;.line span[data-id&＃61;"&＃39;&＃43;Number(num&＃43;1)&＃43;&＃39;"&＃39;).hide();

}

}

});