HTML5 implements check-in function

H5 example of user sign-in (css+jquery, no picture). Since the user sign-in examples found on the Internet are not good, either they are composed of many pictures, or they have a lot of redundant code, so I specially made a sign-in interface ( mobile terminal).

User sign sample page for mobile using h5 which only use css + jquery + html.

Demo

https://fallstar0.github.io/SignSample/

Shot(screenshot)

The idea of ​​writing this function is to first construct the date and check-in related data, then obtain the data from the server, change the original data, and finally render it.

This is a good way to get rid of the problem of messy logic, and the data can be mounted directly with vue.js (this article does not do this).

Generate date data

 //Generate date data function buildData() { var da = { dates: [],//Date data, starting from the 1st current: '',//Current date monthFirst: 1,//Get the 1st day of the month equal to the week Month: 0,//The current month days: 30,//How many days are there in the current month day: 0,//What is today’s date isSigned: false, //Whether you have signed in today signLastDays:3,//Continuous sign-in days signToday: function () { this.isSigned = true; this.dates[this.day].isSigned = true; }, }; var ds = [ ]; //Initialize date data var dt = new Date(); da.current = dt.ToString('yyyy year M month d day'); 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();//Get the number of days in the current month da.day = dt.getDate(); for (var i = 1; i < da.days + 1; i++) { var o = { isSigned: false,//Whether it is signed in num: i,//Date isToday: i == da.day,//Whether it is today isPass: i < da. day,//time has passed}; ds[i] = o; } da.dates = ds; return da; }

Once you have the data, you can convert the data into an interface

 //Render data 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; //Up to 6 lines for (var i = 0; i < 42; i++) { if (i % 7 == 0) { //If there is no date, break if (i > (st + da.days)) break ; tr = document.createElement('tr'); tr.className = 'darkcolor trb'; root.appendChild(tr); rowcount++; } //Blank before or after if (i < st || !dates[i - st + 1]) { td = document.createElement('td'); td.innerHTML = '<div class=sign-blank><span></span></div>'; tr. appendChild(td); continue; } //Fill in the number part 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); } //Calculate whether The last row needs to be added if ((st + da.days + 1) / 7 > rowcount) root.appendChild(tr); } //Build date data var da = buildData(); //Render renderData(da);

Copyright

[email protected]

https://github.com/FallStar0/SignSample

https://gitee.com/fallstar/SignSample