自动网页签到 html,HTML5实现签到 功能
Introduce(介绍)
用户签到的H5例子(css+jquery,无图片),由于网上找的的用户签到例子都不好,要不就是好多图片组成的,要不就大量冗余代码,所以特意做了个签到界面(移动端)。
User sign sample page for mobile using h5 which only use css + jquery + html.
Demo
Shot(截图)
一些关键的地方
这个功能的编写思路是,先构建日期和签到相关数据,然后从服务端获取数据,并对原有数据进行更改,最后进行渲染。
这样子很好的摆脱了逻辑比较凌乱的问题,并且可以直接将这些数据用 vue.js 来挂载(本文没有这样做)。
生成日期数据
//生成日期数据
function buildData() {
var da = {
dates: [],//日期数据,从1号开始
current: '',//当前日期
monthFirst: 1,//获取当月的1日等于星期几
month: 0,//当前月份
days: 30,//当前月份共有多少天
day: 0,//今天几号了
isSigned: false,//今天是否已经签到
signLastDays:3,//连续签到日子
signToday: function () {
this.isSigned = true;
this.dates[this.day].isSigned = true;
},
};
var ds = [];
//初始化日期数据
var dt = new Date();
da.current = dt.ToString('yyyy年M月d日');
da.monthFirst = new Date(dt.getFullYear(), dt.getMonth(), 1).getDay();
da.month = dt.getMonth() + 1;
da.days = new Date(dt.getFullYear(), parseInt(da.month), 0).getDate();//获取当前月的天数
da.day = dt.getDate();
for (var i = 1; i < da.days + 1; i++) {
var o = {
isSigned: false,//是否签到了
num: i,//日期
isToday: i == da.day,//是否今天
isPass: i < da.day,//时间已过去
};
ds[i] = o;
}
da.dates = ds;
return da;
}
有了数据之后,就可以将数据转换为界面了
//渲染数据
function renderData(da) {
var signDays = document.getElementById('spSignDays');
signDays.innerText = da.signLastDays;
var root = document.getElementById("signTable");
root.innerHTML = '';
var tr, td;
var st = da.monthFirst;
var dates = da.dates;
var rowcount = 0;
//最多6行
for (var i = 0; i < 42; i++) {
if (i % 7 == 0) {
//如果没有日期了,中断
if (i > (st + da.days))
break;
tr = document.createElement('tr');
tr.className = 'darkcolor trb';
root.appendChild(tr);
rowcount++;
}
//前面或后面的空白
if (i < st || !dates[i - st + 1]) {
td = document.createElement('td');
td.innerHTML = '
tr.appendChild(td);
continue;
}
//填充数字部分
var d = dates[i - st + 1];
td = document.createElement('td');
var tdcss = '';
if (d.isToday)
tdcss = 'sign-today';
else if (d.isPass)
tdcss = 'sign-pass';
else
tdcss = 'sign-future';
if (d.isSigned) {
tdcss = 'sign-signed ' + tdcss;
td.innerHTML = '
';
} else {
tdcss = 'sign-unsign ' + tdcss;
td.innerHTML = '
';
}
tr.appendChild(td);
}
//计算是否需要添加最后一行
if ((st + da.days + 1) / 7 > rowcount)
root.appendChild(tr);
}
//构建日期数据
var da = buildData();
//渲染
renderData(da);
Copyright
自动网页签到 html,HTML5实现签到 功能相关推荐
- 签到体系设计:签到功能该怎么画
编辑导语:如今我们在很多产品上都可以看见签到的功能,签到功能是培养用户习惯的好办法,通过签到吸引用户每天去完成打开APP的动作,这一功能很大程度上提升了用户留存率:本文作者分享了关于签到功能的设计,我 ...
- 如何使用微信签到,实现会议签到功能?实现年会签到功能?
如何使用微信签到,实现会议签到功能?实现年会签到功能? 签到运用场景比较多,下面说一下最常用的签到逻辑实现: 1.关注公众号 2.手机上录入签到信息,例如姓名 这个环节可以自动获取用户的微信头像. 3 ...
- html如何制作滑块,网页制作html5实现滑块功能之type=quot;rangequot;属性-建站-建站教程-建站方法-米云建站 - 米云问答...
html5实现滑块功能之type="range"属性 1.html5中添加了关于滑块的标签,其实际是扩展了input标签,type属性值为range. 2.感觉挺有意思,就做了一个 ...
- CSDN是怎么实现用户签到,统计签到次数,连续签到天数等功能微服务的
文章目录 需求分析 设计思路 用户签到和统计连续签到的次数 签到控制层 SignController 签到业务逻辑层 SignService 测试 按月统计用户签到的次数 签到控制层 SignCont ...
- 熊猫怎么用html5看直播,熊猫TV HTML5播放器自动网页全屏
// ==UserScript== // @name 熊猫TV HTML5播放器自动网页全屏 // @name:zh-CN 熊猫TV HTML5播放器自动网页全屏 // @namespace pand ...
- HTML5七夕情人节表白网页_(唯美满天星)多功能展示(网状球状)3D相册_HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册
HTML5七夕情人节表白网页_(唯美满天星)多功能展示(网状球状)3D相册_HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花 ...
- php怎么做签到系统,php实现签到功能(案例)
这篇文章主要介绍了php实现签到功能的方法,结合实例形式分析了php基于数据库及时间判断操作实现签到功能的相关技巧,需要的朋友可以参考下 本文实例讲述了php实现签到功能的方法.分享给大家供大家参考, ...
- html5 3d 签到墙,GO互动首创年会自定义动态主题背景签到墙,活动策划人必备!...
一场会议活动最开始的的视觉焦点都聚集在活动主题展示上,因为它能够清晰地表明活动的活动目的和内容. 而在会议活动刚开始的签到过程中,却往往会忽视这一点. 这次GO互动将签到墙全新升级,不仅将活动主题背景 ...
- Redis实战 - 09 Redis BitMaps 实现用户签到,统计签到次数,统计签到情况等功能
文章目录 1. 需求分析 2. 设计思路 3. 用户签到和统计连续签到的次数 1. 签到控制层 SignController 2. 签到业务逻辑层 SignService 3. 测试 4. 按月统计用 ...
最新文章
- 简单web服务器学习总结
- [Android1.5]DigitalClock自定义日期输出格式
- containerd 与安全沙箱的 Kubernetes 初体验
- Pandas库(2):数据的统计分析
- DotNetCore跨平台~配置文件与配置代码如何共存
- Spring_day2
- 什么是在JavaScript中扩展错误的好方法?
- 【Android开发日记】妙用 RelativeLayout 实现3 段布局
- 海军装备、舰船电子设备|环境可靠性试验|GJB150A\GJB4
- Echarts之风力风速玫瑰图
- 天若OCR文字识别软件
- NLP在网络文学领域的应用
- 如何开启计算机cpu虚拟化,如何开启cpu虚拟化_VMware Workstation 中如何开启CPU 的虚拟化支持?...
- 财报汇总 | 中国生物制药、格林酒店、海亮教育、洪恩教育等5家企业公布最新业绩...
- 第2期:大数据岗位有哪些
- 프로그래머로 살아남는 법
- 重装Win10系统后导致网速卡的解决办法
- 第五人格手机游戏在PC上怎么玩?第五人格哪款模拟器好用?
- linux内核使用scons构建,使用scons软件构建工具
- 苹果电脑上手写html,暴强:Mac电脑触控板也可用Apple Pencil手写笔