HTML5实现签到 功能

introduce(介绍)

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

ur sign sample page for mobile using h5 which only u css + jquery + html.

demo

https://fallstar0.github.io/signsample/

shot(截图)

一些关键的地方

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

这样子很好的摆脱了逻辑比较凌乱的问题，并且可以直接将这些数据用 vue.js 来挂载（本文没有这样做）。

生成日期数据

//生成日期数据    function builddata() {        var da = {            dates: [],//日期数据，从1号开始            current: '',//当前日期            monthfirst: 1,//获取当月的1日等于星期几            month: 0,//当前月份            days: 30,//当前月份共有多少天            day: 0,//今天几号了            issigned: fal,//今天是否已经签到            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(), parint(da.month), 0).getdate();//获取当前月的天数        da.day = dt.getdate();        for (var i = 1; i < da.days + 1; i++) {            var o = {                issigned: fal,//是否签到了                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("sign茶叶营销table");        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';            el if (d.ispass)                tdcss = 'sign-pass';            el                tdcss = 'sign-future';   少先队建队纪念日         if (d.issigned) {               奖学金申请书500字 tdcss = 'sign-signed ' + tdcss;                td.innerhtml = '<div class="' + tdcss + '"><span>' + d.num + '</span><svg xmlns="/d/file/titlepic/svg" version="1.1" class="sign-pin svg-triangle欧阳修《采桑子》 "><polygon points="0,0 35,0 0,35" /></svg></div>';            } el {                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

https://github.com/fallstar0/signsample

https://gitee.com/fallstar/signsample