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过渡_动力节点Java学院整理
Jul 11 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 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显示MySQL数据的三种方法
2008/06/05 PHP
php计算整个目录大小的方法
2015/06/19 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
深入理解Node module模块
2018/03/26 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
详解Python中break语句的用法
2015/05/14 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
用Python实现KNN分类算法
2017/12/22 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Tensorflow累加的实现案例
2020/02/05 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
const和static readonly区别
2013/05/20 面试题
实习护士自我鉴定
2013/10/13 职场文书
班组安全员工作职责
2014/02/01 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
团支部建设方案
2014/05/02 职场文书
责任心演讲稿
2014/05/14 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
python文件与路径操作神器 pathlib
2022/04/01 Python
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang