后端返回數據： $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();

}

}

});

總結

以上是生活随笔為你收集整理的每日签到html特效,前端这种连续签到的效果要怎么写的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。