Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to achieve the check-in function in html, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this html article on how to achieve the check-in function. Let's take a look at it.

Some key places.

The idea of this function is to first build the date and check-in data, then get 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 you can mount the data directly with vue.js (not done in this article).

Generate date data

/ / generate date data function buildData () {var da = {dates: [], / / date data From the 1st onwards, current:', / / current date monthFirst: 1 false,// peg / get the day of the week month: 0 Jagger / current month days: 30 jigger / how many days are there in the current month day: 0Grample / what date is today isSigned: false,// has signed up for signLastDays:3 today / / continuous check-in date signToday: function () {this.isSigned = true Da.current [this.day] .isSigned = true;},}; var ds = []; / / initialization date data var dt = new Date (); da.current = dt.ToString ('yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy 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,//是否签到了 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[xss_clean] = ''; 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++;} / / blank if before or after (I)

< st || !dates[i - st + 1]) { td = document.createElement('td'); td[xss_clean] = ''; 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[xss_clean] = '' + d.num + ''; } else { tdcss = 'sign-unsign ' + tdcss; td[xss_clean] = '' + d.num + ''; } tr.appendChild(td); } //计算是否需要添加最后一行 if ((st + da.days + 1) / 7 >

Rowcount) root.appendChild (tr);} / build date data var da = buildData (); / / render renderData (da); this is the end of the article on "how to implement check-in in html". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve check-in function in html". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.