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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
纯CSS3实现图片无间断轮播效果
Aug 25 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
HTML基础详解(上)
Oct 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制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
php cli配置文件问题分析
2015/10/15 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
layui动态加载多表头的实例
2019/09/05 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
python异常和文件处理机制详解
2016/07/19 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
淘宝好评语大全
2014/05/05 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
房屋租赁协议书
2014/10/18 职场文书
语文教师个人工作总结
2015/02/06 职场文书
车队安全员岗位职责
2015/02/15 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
MySql新手入门的基本操作汇总
2021/05/13 MySQL