自动网页签到 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. 按月统计用 ...
最新文章
- [JS,CSS] - CSS圆角框组件
- DataGridView 中发生以下异常: System.Exception: 是 不是 Decimal 的有效值。 ---> System.FormatException: 输入字符串的格式不正确。
- 成功搞定了在Windows7中安装SAP了
- bat循环执行带参数_dos命令exit图文教程,结束退出CMD.EXE程序或当前bat批处理脚本...
- 给WIN2003 IIS SQL服务器安全加固
- 关于导入项目eclipse出现乱码的问题
- 泰拉瑞亚服务器怎么让玩家注册,上线10年,《泰拉瑞亚》为何变成了一款交友游戏?...
- .Net中的多态知识点
- qt读oracle时间戳,QT利用QDateTime获取当前时间戳的方法toTime_t
- CentOS桥接网卡配置
- 为何要学习 Linux?
- ACPI文件处理与屏蔽独显、亮度调节
- 忍之の爱你术 全代码
- android手机截图 视频,安卓Android手机相册视频如何隐藏
- 计算机应用基础实训教程侯冬梅,计算机应用基础实训教程
- 通过WIFI唤醒终端设备
- 我女儿说要看雪,于是我默默的拿起了键盘,下雪咯,程序员就是可以为所欲为!
- PCM开发板模块实验指导--有刷直流马达速度位置控制实验
- 触觉是怎么产生的?清华大学破解诺奖成果未解之谜,登上Nature
- Git ssh 下载设置