HTML5實作簽到功能

用戶簽到的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 來掛載（本文沒有這樣做）。

產生日期數據

 //產生日期數據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 trtr,tr,tr,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);

版權所有

[email protected]

https://github.com/FallStar0/SignSample

https://gitee.com/fallstar/SignSample