每日签到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();

}

});

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

HiveSQL面试题18--腾讯面试用户连续签到天数及历史最大连续签到天数问题
目录 0 题目 1 数据准备 3 数据分析 4 小结 0 题目有一张用户签到表[t_user_attendence],标记每天用户是否签到(说明:该表包含所有用户所有工作日的出勤记录) ,包含三个字 ...
微信小程序实现每日签到、连续签到
昨天在看自己写的小程序项目,无意中打开了CSDN APP,突然间觉得,我去,如果在小程序中加个"签到"功能,岂不美哉!(好吧,其实是买的书昨天没到货,然后闲着无事,就想起了大明湖畔 ...
mysql 连续签到天数_新版签到活动明天上线，福利活动抢鲜看~
明天游戏中心app旧版福利签到活动马上就要结束啦,虽然很多的魅友反馈说积分签到结束的太早,积分不够换5折券,不过更早的开启新版签到才能更快的享受到更好的福利嘛~ 今晚0点新版签到活动即将上线,接下来就 ...
mysql 连续签到天数_签到功能实现，没有你想的那么复杂(一)
1 签到定义以及作用签到,指在规定的簿册上签名或写一"到"字,表示本人已经到达.在APP中使用此功能,可以增加用户粘性和活跃度.2 技术选型redis为主写入查询,mysql辅助查 ...
使用 apifm 插件进行 Flutter 云开发——积分功能(积分明细 / 积分券 / 连续签到得积分 / 购物积分抵扣规则)
功能说明: 积分券后台批量生成积分券(每个积分券有自己独立的券号): 你可以根据自己的需要: 制作实体vip积分卡,类似目前的超市卡,刮开涂层后查看券号: 印刷纸质优惠券.积分券,上面印刷券号: 使 ...
Redis BitMap结构实现签到、连续签到统计
文章目录一.利用BitMap结构实现签到功能 1.1 BitMap用法 1.2 代码实现签到功能 1.3 统计连续签到 1.3.1 如何得到本月到今天为止的所有签到数据 1.3.2 如何从后向前遍历 ...
java实现连续签到加分_java实现app签到功能
本文实例为大家分享了java实现app签到功能的具体代码,供大家参考,具体内容如下 1.首先设计二张表,第一张表sign_calc记录用户连续签到次数,字段id,user_id,continue_da ...
简单的签到代码_开窗排序函数解决连续签到问题|SQL
开窗排序函数除了在处理简单的排序问题外,它的应用场景远比我们想的要多.本文将对两个问题,介绍开窗排序函数的用法. 一.问题有一张用户签到表[签到表],标记每天用户是否签到(说明:该表包含所有用户所有 ...
连续签到数据表设计php,数据库，连续的签到系统怎么设计？
背景:对连续签到的系统进行递级给积分,并且连续签到有一定的积分奖励,并且用户连续签到30天给比较多的积分. 要求:并不是按照自然月来签到. 怎么判断是不是连续签到呢? 然后就是数据库怎么设计好呢,因为 ...

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

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

最新文章

热门文章