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

zx兔子先生
  • 1.1k

clipboard.png

有什么例子么
后端返回什么样的数据比较好写

回复
阅读 4.1k
5 个回答
皇埔铁蛋
  • 428
✓ 已被采纳

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

          month: 当前月份;
          data:签到的日期;

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

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

示例代码:

<div id="sign">

<li class="date">1</li>
<span data-id="1" class="line"></span>
<li class="date">2</li>
<span data-id="2" class="line"></span>
<li class="date">3</li>
<span data-id="3" class="line"></span>
<li class="date">4</li>
<span data-id="4" class="line"></span>
<li class="date">5</li>
<span data-id="5" class="line"></span>
<li class="date">6</li>
<span data-id="6" class="line"></span>

</div>

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();
        }
    }
});
    
渣正refn
  • 107

第一印象是返回二维数组会比较好写。例如1,3,4,5,7,8,9天签到。那么返回

const days = [[1], [3, 4, 5], [7, 8, 9]]

返回一个数组就行,只存已签到的日期。

如果考虑扩展性的话,比如还加入一些节日,用户生日的样式,返回一个数组对象比较好:

var obj = [
    {d:1,class:'birthday'},
    {d:2},
    {d:3}
]

没签到的话圆圈两侧是灰色线把红色的覆盖掉

宣传栏