HTML5实现签到 功能

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(截图)

一些关键的地方

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

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

生成日期数据

1. //生成日期数据
2. function buildData() {
3. var da = {
4. dates: [],//日期数据，从1号开始
5. current: '',//当前日期
6. monthFirst: 1,//获取当月的1日等于星期几
7. month: 0,//当前月份
8. days: 30,//当前月份共有多少天
9. day: 0,//今天几号了
10. isSigned: false,//今天是否已经签到
11. signLastDays:3,//连续签到日子
12. signToday: function () {
13. this.isSigned = true;
14. this.dates[this.day].isSigned = true;
15. },
16. };
17. var ds = [];
18. //初始化日期数据
19. var dt = new Date();
20. da.current = dt.ToString('yyyy年M月d日');
21. da.monthFirst = new Date(dt.getFullYear(), dt.getMonth(), 1).getDay();
22. da.month = dt.getMonth() + 1;
23. da.days = new Date(dt.getFullYear(), parseInt(da.month), 0).getDate();//获取当前月的天数
24. da.day = dt.getDate();
25. for (var i = 1; i < da.days + 1; i++) {
26. var o = {
27. isSigned: false,//是否签到了
28. num: i,//日期
29. isToday: i == da.day,//是否今天
30. isPass: i < da.day,//时间已过去
31. };
32. ds[i] = o;
33. }
34. da.dates = ds;
35. return da;
36. }

有了数据之后，就可以将数据转换为界面了

1. //渲染数据
2. function renderData(da) {
3. var signDays = document.getElementById('spSignDays');
4. signDays.innerText = da.signLastDays;
5. var root = document.getElementById("signTable");
6. root.innerHTML = '';
7. var tr, td;
8. var st = da.monthFirst;
9. var dates = da.dates;
10. var rowcount = 0;
11. //最多6行
12. for (var i = 0; i < 42; i++) {
13. if (i % 7 == 0) {
14. //如果没有日期了，中断
15. if (i > (st + da.days))
16. break;
17. tr = document.createElement('tr');
18. tr.className = 'darkcolor trb';
19. root.appendChild(tr);
20. rowcount++;
21. }
22. //前面或后面的空白
23. if (i < st || !dates[i - st + 1]) {
24. td = document.createElement('td');
25. td.innerHTML = '<div class="sign-blank"><span></span></div>';
26. tr.appendChild(td);
27. continue;
28. }
29. //填充数字部分
30. var d = dates[i - st + 1];
31. td = document.createElement('td');
32. var tdcss = '';
33. if (d.isToday)
34. tdcss = 'sign-today';
35. else if (d.isPass)
36. tdcss = 'sign-pass';
37. else
38. tdcss = 'sign-future';
39. if (d.isSigned) {
40. tdcss = 'sign-signed ' + tdcss;
41. 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>';
42. } else {
43. tdcss = 'sign-unsign ' + tdcss;
44. td.innerHTML = '<div class="' + tdcss + '"><span>' + d.num + '</span></div>';
45. }
46. tr.appendChild(td);
47. }
48. //计算是否需要添加最后一行
49. if ((st + da.days + 1) / 7 > rowcount)
50. root.appendChild(tr);
51. }
52. //构建日期数据
53. var da = buildData();
54. //渲染
55. renderData(da);

Copyright

Author fallstar0@qq.com

https://github.com/FallStar0/SignSample

https://gitee.com/fallstar/SignSample