HTML5实现签到 功能


Posted in HTML / CSS onOctober 09, 2018

Introduce(介绍)

用户签到的H5例子(css+jquery,无图片),由于网上找的的用户签到例子都不好,要不就是好多图片组成的,要不就大量冗余代码,所以特意做了个签到界面(移动端)。

User sign sample page for mobile using h5 which only use css + jquery + html.

Demo

https://fallstar0.github.io/SignSample/

Shot(截图)

HTML5实现签到 功能

HTML5实现签到 功能

一些关键的地方

这个功能的编写思路是,先构建日期和签到相关数据,然后从服务端获取数据,并对原有数据进行更改,最后进行渲染。

这样子很好的摆脱了逻辑比较凌乱的问题,并且可以直接将这些数据用 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 = '<div class="sign-blank"><span></span></div>';
                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 = '<div class="' + tdcss + '"><span>' + d.num + '</span><svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="sign-pin svg-triangle "><polygon points="0,0 35,0 0,35" /></svg></div>';
            } else {
                tdcss = 'sign-unsign ' + tdcss;
                td.innerHTML = '<div class="' + tdcss + '"><span>' + d.num + '</span></div>';
            }
            tr.appendChild(td);
        }
        //计算是否需要添加最后一行
        if ((st + da.days + 1) / 7 > rowcount)
            root.appendChild(tr);
    }
       //构建日期数据
        var da = buildData();
        //渲染
        renderData(da);

 

Copyright

Author fallstar0@qq.com

https://github.com/FallStar0/SignSample

https://gitee.com/fallstar/SignSample
 

HTML / CSS 相关文章推荐
css3中transition属性详解
Sep 02 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 HTML / CSS
css如何把元素固定在容器底部的四种方式
Jun 16 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 #HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 #HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 #HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 #HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 #HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 #HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 #HTML / CSS
You might like
那些年一起学习的PHP(一)
2012/03/21 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
工程造价与管理专业应届生求职信
2013/11/23 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
2015年企业工作总结范文
2015/04/28 职场文书