HTML5 implementa função de check-in

Exemplo H5 de login do usuário (css + jquery, sem imagem). Como os exemplos de login do usuário encontrados na Internet não são bons, ou são compostos de muitas imagens ou têm muito código redundante, então eu feita especialmente uma interface de login (terminal móvel).

Página de exemplo de assinatura do usuário para celular usando h5 que usa apenas css + jquery + html.

Demonstração

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

Foto(captura de tela)

A ideia de escrever esta função é primeiro construir os dados relacionados à data e ao check-in, depois obter os dados do servidor, alterar os dados originais e, finalmente, renderizá-los.

Esta é uma boa maneira de se livrar do problema de lógica confusa, e os dados podem ser montados diretamente com vue.js (este artigo não faz isso).

Gerar dados de data

 //Gerar dados de data function buildData() { var da = { datas: [],//Dados de data, começando no 1º atual: '',//Data atual mêsPrimeiro: 1,//Obter o 1º dia do mês igual à semana Mês: 0,//Os dias do mês atual: 30,//Quantos dias existem no mês atual dia: 0,//Qual é a data de hoje isSigned: false, //Se você fez login hoje signLastDays:3,//Dias de login contínuo signToday: function () { this.isSigned = true; this.dates[this.day].isSigned = true }, }; var ds = [ ]; //Inicializar dados de data var dt = new Date(); Data(dt.getFullYear(), dt.getMonth(), 1).getDay(); da.mês = dt.getMonth() + 1; da.dias = new Date(dt.getFullYear(), parseInt(da. mês), 0).getDate();//Obtém o número de dias do mês atual da.day = dt.getDate(); i < da.days + 1; i++) { var o = { isSigned: false,//Se está assinado em num: i,//Date isToday: i == da.day,//Se é hoje isPass: i < dia. // a hora passou}; ds[i] = o } da.datas = ds;

Depois de ter os dados, você pode convertê-los em uma interface

 //Renderizar função de dados renderData(da) { var signDays = document.getElementById('spSignDays'); signDays.innerText = da.signLastDays; td; var st = da.mêsPrimeiro; //Até 6 linhas para (var i = 0; i < 42; i++) { if (i % 7 == 0) { //Se não houver data, quebra if (i > (st + da.days) ) break ; tr = document.createElement('tr'); tr.className = 'darkcolor trb'; root.appendChild(tr } //Em branco antes ou depois if (i < st || !datas[i - st + 1]) { td = document.createElement('td.innerHTML = '<div class=sign-blank><span></span></div>'; appendChild(td); continue } //Preencha a parte numérica var d = datas[i - td = document.createElement('td'); tdcss = ''; if (d.isToday) tdcss = 'assinar hoje'; else if (d.isPass) tdcss = 'sign-pass'; else tdcss = 'sign-future'; tdcss = 'assinado' + tdcss; 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); Precisa adicionar a última linha if ((st + da.days + 1) / 7 > rowcount) root.appendChild(tr } //Construir dados de data var da =); buildData(); //Renderiza renderData(da);

Direitos autorais

[email protected]

https://github.com/FallStar0/SignSample

https://gitee.com/fallstar/SignSample