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

后端返回数据： $data = ['month'=>'2017-08','date'=>'1,2,3,7,11']

month: 当前月份；

data:签到的日期;

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

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

示例代码：

123456

js代码：

var data = {'month':'2017-08','date':[1,2,4,6]};

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

$('.date').each(function () {

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

$(this).html() == n ? $(this).addClass('on'):$(this).addClass('off');

})

});

$('.data').each(function(){

if($(this).hasClass('off')){

var num = $(this).html();

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

$('.line span[data-id="'+num+'"').hide();

if(num != 1 || num!=30){

$('.line span[data-id="'+Number(num+1)+'"').hide();

}

}

});