首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端|利用js实现在日历中的签到效果

效果介绍 日历在手机软件里是非常常见的一个功能,几乎每一个手机都有一个自带的手机日历软件。签到功能也是特别常用的,学习通、淘宝、包括学校使用的热水软件U易也都有运用。...在一些签到获取积分(或者其他奖励)的软件中,签到和日历功能常常是捆绑使用。我们今天要实现的也是签到功能和日历捆绑在一起的效果。 本次的实现效果如下图1.1: ?...关于日历我们需要实现的效果有:①判断某一天是星期几;②判断某个月有几天;③判断某一年是平年还是闰年(即二月份是28天还是29天); 关于签到需要实现的更多的是样式的变化:①点击签到之后,签到按钮要发生变化...,从签到变成已签到;②当签到成功后,页面利用模态框显示“签到成功字样”,如图2.1所示;③当签到成功后日历中对应的日期要发生相应的样式变化; ?...对日历进行实现; 关于日历功能实现的具体步骤: (1)利用HTML5代码对页面框架进行搭建: div> <div class="col-xs

5.5K21

▲ Android 自定义日历签到效果

如果需要更多的定制化需求请直接看我这篇,Android 使用RecycleView自定义日历签到效果 ,自定义日历2.0的功能远远大于我这个篇1.0的效果。...效果展示 自定义1.0的效果,适用于需求差不多,拿过来直接使用的。毕竟大家时间宝贵. 这里的这个图标是可以根据自己的需求更换的,比如连续签到有礼包的这种,还有忘记签到状态之类的。...代码实现 通过自定义View,把带有日历的Adapter加载到这个View中,然后通过这个View实现 OnTodayClickListener完成签到。...*/ private static final int COLOR_BACKGROUND_HIGHLIGHT = 0xFF1B89CD; /** * 未签到背景色...*/ private static final int COLOR_BACKGROUND_NORMAL = 0xFFFFFFFF; /** * 等待签到背景色

90820
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    ▲ Android 使用RecycleView自定义日历签到效果

    最近公司又要求做一个签到日历效果,我为啥加个又是之前我实现了一个日历签到效果,而这次我使用的则是RecycleView去实现。 实现思路 初始化日历数据,把数据传入到适配器中并显示。...,作为上一个月在本日历的结束日期 if ((year - 1) == this.mYear || month == 1) {// 说明向前翻了一年,那么上个月的天数就应该是上一年的12月的天数,或者到翻到一月份的时候...,那么上一个月的天数也是上一年的12月份的天数 endDate = this.getDays(year - 1, 12); } else {// 得到上一个月的天数,作为上一个月在本日历的结束日期...this.mMonth = month;// 当前日历上显示的月 int days = this.getDays(year, month);// 得到本月的总共天数 int dayOfWeek...因为我的需求是点击按钮完成签到即可,不用点击日历中的日期(item),只需要把当前的日期传入即可 Calendar calendar = Calendar.getInstance

    1.2K20

    皮一下,给自己做个打卡系统

    简单日历功能;包括星期、上个月、下个月翻页; 对于日历时间段要分为 今天、今天之前的日期、今天之后的日期; 实现签到功能。...签到就是将年 - 月 - 日的数据保存到数据库; 如果某天已经签到了,需要在日历上体现出来; 如果小程序没有后端开发,可以将签到的数据暂存在微信缓存中,实现单机版的功能,但是真正上线的产品必须保持到数据库中...当日历实现之后,我们将已经签到了日期和日历上的日期进行比对,如果日期已经签到,那么给一个特定的样式即可实现已签到展示功能。 ?...获取之后,就可以加载此用户的签到数据了; 依然需要调用后台应用,从数据库中获取 year-month 对应的签到日期; 数据获取完成之后,调用 Calendar.js 中的初始化日历的函数,实现日历数据的准备...; 将数据绑定到 data 中,完成了页面的展示; 签到功能,参考 index.js 中的 doSign 函数,代码和数据获取类似,都是 wx.reqeust 请求 为了不打扰大家学习的思路,这里将主要的代码贴出来

    3.6K62

    CSDN是怎么实现用户签到,统计签到次数,连续签到天数等功能微服务的

    文章目录 需求分析 设计思路 用户签到和统计连续签到的次数 签到控制层 SignController 签到业务逻辑层 SignService 测试 按月统计用户签到的次数 签到控制层 SignController...如果连续签到中断,则重置计数,每月初重置计数。 显示用户某个月的签到次数。 在日历控件上展示用户每月签到情况,可以切换年月显示。...: 测试 id为6的用户发起签到: id为6的用户发起重复签到: 补签19号: 21号再次签到,可以发现连续签到日期为3天。...查询当月签到总天数为5天: 获取用户签到明细情况 获取用户某月签到情况,默认当前月,返回当前月的所有日期以及该日期的签到情况 签到控制层 SignController /** *...SignService 获取某月签到情况,默认当月 获取登录用户信息 构建Redis保存的Key 获取月份的总天数(考虑2月闰、平年) 通过BITFIELD指令获取当前月的所有签到数据 遍历进行判断是否签到

    2.5K20

    Node.js代码不到50行,实现稀土掘金社区自动签到

    我们这里采用的技术栈是Node.js。代码不到50行,先贴上代码。...; scheduleCronstyle(); // 定时启动 // start(); // 立即启动 }) 这些代码就可以实现一个掘金自动签到功能,再也不用自己手动点击签到了!...在网页登录你的掘金账号; 打开签到页面(如果没签到,就点击签到); 打开控制台,切换到网络选项卡,找到/check_in_rules这个接口,然后把后面的字符串(以aid=开头)复制保存。...然后,我们接着看下sessionid这个变量是从何而来的。...因为Cookie有时间期限,但是一般都几个月左右,够用的了。过期了,重新替换下即可。 结语 有云服务器的小伙伴,你可以使用pm2持久运行Node应用。

    99310

    日历表的使用

    日历表使用 同第一个阶段一样,特别附加一个小章节的目的是想把没有完善的且重要的知识补全。本节有三个知识点,日历表排序,在PowerQuery中创建日历表,定制日历表的使用。...2 日历表的制作方法 关于日历表的制作方法有很多,利用Excel表最简单常用,此外另一个作者本人比较青睐的方法是在PowerQuery中直接建立一张日期表,这样你就不用再担心数据源表的变更问题。...对于定制版的日历,内置的Datesytd,Previousmonth...这些时间智能函数不好用了,我们需要一个能应对定制日历表的万金油方法。...以中国香港上市公司的财年日历来举例,每年的4月1日到次年的3月31日为一财年,我们怎样实现按照财年分析数据呢?答案是把定制与标准日历表关联起来。...1)首先我们肯定要有一张定制版日历表如下,添加一个不重复的ID列。 2)保留标准的日历表,按照定制版的日历表ID来给标准日历表设定ID。

    2.2K10

    Selenium2+python自动化25-js处理日历控件

    前言 日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题。...基本思路:先用js去掉readonly属性,然后直接输入日期文本内容 一、日历控件 1.打开12306的车票查询界面,在出发日期输入框无法直接输入时间 2.常规思路是点开日历控件弹出框,...从日历控件上点日期,这样操作比较烦躁,并且我们测试的重点不在日历控件上,只是想输入个时间,做下一步的操作 3.用firebug查看输入框的属性:readonly="readonly",如下: <...四、输入日期 1.输入日期前,一定要先清空文本,要不然无法输入成功的。 2.这里输入日期后,会自动弹出日历控件,随便点下其它位置就好了,接下来会用js方法传入日期,就不会弹啦! ?...五、js方法输入日期 1.这里也可以用js方法输入日期,其实很简单,直接改掉输入框元素的value值就可以啦 ?

    4.1K60

    博客小程序签到功能实现

    昨天抽空将mini-blog的签到功能基本上实现了,这里分享下。 很早之前就想实现签到功能,昨天终于花时间去变现了,先来看下效果图。 效果 ?...个人中心的排版进行了一定的改造,将关于个人相关的信息整合,留些位置给到签到。 ? 截图1 签到页还是常规的日历组件,为了保证一页填满,加了一个广告组件。 ? 截图2 后端实现 ?...这次核心的方法就是签到,要操作的集合还是比较多的,除了要操作上面新增的三个集合之外,还要加一个mini_subcribute,用于接入签到提醒的订阅消息。...在前端交互上,本着不重复造轮子的目的,找了个开源日历组件「wx_calendar」,样式上基本能接受,功能也满足,所以直接拿来用了。详细的文档可以看下他的github,文档还是比较详细的。...主要在初始化日历组件之后,需要获取历史已经签到的明细,来渲染选中状态: /** * 日历组件渲染之后 */ afterCalendarRender: async function (e)

    1.5K30

    auto.js自动化处理插件 - 葡萄浏览器多账号签到

    auto.js自动化处理插件 - 葡萄浏览器多账号签到 作者:matrix 被围观: 3,901 次 发布时间:2020-02-11 分类:零零星星 | 一条评论 » 这是一个创建于 932...https://hyb1996.github.io/AutoJs-Docs 目前要使用多个账号登录,然后进行点击签到,看广告的需求。...测试的app是葡萄浏览器com.qwh.grapebrowser,最终效果是运行后自动切换账号来签到。...auto.js APP设置里打开连接电脑,填入电脑端内网ip。当然手机和电脑是要一个内网环境 运行Run命令就可以在app端运行插件脚本。注意默认模式需要打开在Auso.js界面中启动。...var ad = id('skip_view');//跳过广告按钮 var my = id("ll_mine");//我的按钮 var sign = id("iv_sign");//签到图标 var

    2.2K30
    领券