HTML5 implementa la función de registro

Ejemplo H5 de inicio de sesión de usuario (css+jquery, sin imagen). Dado que los ejemplos de inicio de sesión de usuario que se encuentran en Internet no son buenos, están compuestos por muchas imágenes o tienen mucho código redundante. Interfaz de inicio de sesión especialmente diseñada (terminal móvil).

El usuario firma una página de muestra para dispositivos móviles usando h5 que solo usa css + jquery + html.

Manifestación

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

Disparo (captura de pantalla)

La idea de escribir esta función es construir primero la fecha y los datos relacionados con el registro, luego obtener los datos del servidor, cambiar los datos originales y finalmente renderizarlos.

Esta es una buena manera de deshacerse del problema de la lógica desordenada, y los datos se pueden montar directamente con vue.js (este artículo no hace esto).

Generar datos de fecha

 //Generar función de datos de fecha buildData() { var da = { fechas: [],//Datos de fecha, comenzando desde el 1er actual: '',//Fecha actual mesPrimero: 1,//Obtener el 1er día del mes igual a la semana Mes: 0,//Los días del mes actual: 30,//Cuántos días hay en el mes actual día: 0,//Cuál es la fecha de hoy está firmada: false, //Si ha iniciado sesión hoy signLastDays:3,//Días de inicio de sesión continuo signToday: function () { this.isSigned = true; this.dates[this.day].isSigned = true; var ds = [ ]; //Inicializar datos de fecha var dt = new Date(); da.current = dt.ToString('yyyy año M mes d día'); Fecha(dt.getFullYear(), dt.getMonth(), 1).getDay(); da.mes = dt.getMonth() + 1; da.días = nueva Fecha(dt.getFullYear(), parseInt(da. mes), 0).getDate();//Obtener el número de días del mes actual da.day = dt.getDate(); i < da.days + 1; i++) { var o = { isSigned: false,//Si está firmado en num: i,//La fecha es hoy: i == da.day,//Si es hoy esPass: i < da.día,//ha pasado el tiempo}; ds[i] = o; } da.dates = ds;

Una vez que tenga los datos, puede convertirlos en una interfaz.

 // Función de renderizado de datos renderData(da) { var signDays = document.getElementById('spSignDays'); signDays.innerText = da.signLastDays var root = document.getElementById(signTable); td; var st = da.mesPrimero; var fechas = da.fechas; var número de filas = 0; //Hasta 6 líneas for (var i = 0; i < 42; i++) { if (i % 7 == 0) { //Si no hay fecha, rompe if (i > (st + da.days) ) break ; tr = document.createElement('tr'); tr.className = 'darkcolor trb'; root.appendChild(tr); rowcount++; !fechas[i - st + 1]) { td = document.createElement('td'); td.innerHTML = '<div class=sign-blank><span></span></div>'; appendChild(td); continuar } //Completa la parte numérica var d = fechas[i - st + 1]; tdcss = ''; if (d.isToday) tdcss = 'firmar hoy'; else if (d.isPass) tdcss = 'firmar-pasar'; else tdcss = 'firmar-futuro'; tdcss = 'firmado' + 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 ><puntos poligonales =0,0 35,0 0,35 /></svg></div>'; } else { tdcss = 'firmar-anular firma' + tdcss; td.innerHTML = '<div class=' + tdcss + '><span>' + d.num + '</span></div>' } tr.appendChild(td); Es necesario agregar la última fila if ((st + da.days + 1) / 7 > rowcount) root.appendChild(tr } //Datos de fecha de compilación var da =); buildData(); //Renderizar renderData(da);

Derechos de autor

[email protected]

https://github.com/FallStar0/SignSample

https://gitee.com/fallstar/SignSample