HTML5 implémente la fonction d'enregistrement

Exemple H5 de connexion utilisateur (css+jquery, pas d'image). Étant donné que les exemples de connexion utilisateur trouvés sur Internet ne sont pas bons, soit ils sont composés de nombreuses images, soit ils contiennent beaucoup de code redondant, donc je spécialement conçu une interface de connexion (terminal mobile).

Exemple de page de signature de l'utilisateur pour mobile à l'aide de h5 qui utilise uniquement css + jquery + html.

Démo

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

Prise de vue (capture d'écran)

L'idée d'écrire cette fonction est de construire d'abord les données liées à la date et à l'enregistrement, puis d'obtenir les données du serveur, de modifier les données d'origine et enfin de les restituer.

C'est un bon moyen de se débarrasser du problème de logique désordonnée, et les données peuvent être montées directement avec vue.js (cet article ne le fait pas).

Générer des données de date

 //Générer la fonction de données de date buildData() { var da = { dates : [],//Données de date, à partir du 1er courant : '',//Date actuelle moisPremier : 1,//Obtenir le 1er jour du mois égal à la semaine Mois : 0,//Les jours du mois en cours : 30,//Combien de jours y a-t-il dans le mois en cours jour : 0,//Quelle est la date d'aujourd'hui estSigné : false, //Si vous êtes connecté aujourd'hui signLastDays:3,//Jours de connexion continue signToday: function () { this.isSigned = true; this.dates[this.day].isSigned = true }, }; var ds = [ ]; //Initialiser les données de date var dt = new Date(); da.current = dt.ToString('aaaa année M mois j jour'); Date(dt.getFullYear(), dt.getMonth(), 1).getDay(); da.month = dt.getMonth() + 1; da.days = new Date(dt.getFullYear(), parseInt(da. mois), 0).getDate();//Obtenir le nombre de jours du mois en cours da.day = dt.getDate(); for (var i = 1; i < da.days + 1; i++) { var o = { isSigned: false,//Que ce soit signé en num: i,//Date isToday: i == da.day,//Que ce soit aujourd'hui isPass : je < da. jour,//l'heure est passée}; ds[i] = o; da.dates = ds;

Une fois que vous avez les données, vous pouvez convertir les données en une interface

 // Fonction de rendu des données renderData(da) { var signDays = document.getElementById('spSignDays'); signDays.innerText = da.signLastDays; var root = document.getElementById(signTable root.innerHTML = ''; td; var st = da.monthFirst; var dates = da.dates; var rowcount = 0; //Jusqu'à 6 lignes pour (var i = 0; i < 42; i++) { if (i % 7 == 0) { //S'il n'y a pas de date, interrompez if (i > (st + da.days) ) break ; tr = document.createElement('tr'); tr.className = 'darkcolor trb'; root.appendChild(tr); //Vide avant ou après if (i < st || !dates[i - st + 1]) { td = document.createElement('td'); td.innerHTML = '<div class=sign-blank><span></span></div>'; appendChild(td); continue; } //Remplissez la partie numérique var d = dates[i - st + 1]; tdcss = ''; if (d.isToday) tdcss = 'sign-aujourd'hui'; else if (d.isPass) tdcss = 'sign-pass'; else tdcss = 'sign-future'; tdcss = 'signe-signé' + 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 } //Calculer si Besoin d'ajouter la dernière ligne if ((st + da.days + 1) / 7 > rowcount) root.appendChild(tr } //Construire les données de date var da = buildData(); //Rendu renderData(da);

Droit d'auteur

[email protected]

https://github.com/FallStar0/SignSample

https://gitee.com/fallstar/SignSample