扣丁学堂HTML5培训简述HTML5如何实现签到功能

如今很多的APP都有签到功能，所以签到功能更是常常被使用，本篇文章扣丁学堂HTML5培训小编就给大家分享一下HTML5如何实现签到功能，对签到功能感兴趣的小伙伴就随小编一起来了解一下吧。

HTML5培训

Demo：

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);

想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。

H5进阶课程：https://ke.qq.com/course/387348?flowToken=1008605【扫码进入前端H5架构师进阶VIP体验课】

H5基础课程：https://ke.qq.com/course/320523?flowToken=1008606【扫码进入HTML5前端开发VIP免费公开课】

注：点击(了解更多)进入课程直播间