HTML5 implementiert die Check-in-Funktion

H5-Beispiel für die Benutzeranmeldung (CSS + JQuery, kein Bild). Da die im Internet gefundenen Benutzeranmeldungsbeispiele nicht gut sind, bestehen sie entweder aus vielen Bildern oder haben viel redundanten Code, also habe ich speziell eine Anmeldeschnittstelle (mobiles Endgerät) erstellt.

Benutzersignatur-Beispielseite für Mobilgeräte mit h5, die nur CSS + JQuery + HTML verwenden.

Demo

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

Schuss (Screenshot)

Die Idee beim Schreiben dieser Funktion besteht darin, zunächst die Datums- und Check-in-bezogenen Daten zu erstellen, dann die Daten vom Server abzurufen, die Originaldaten zu ändern und sie schließlich zu rendern.

Dies ist eine gute Möglichkeit, das Problem der chaotischen Logik zu beseitigen, und die Daten können direkt mit vue.js gemountet werden (dies wird in diesem Artikel nicht getan).

Datumsdaten generieren

 //Datumsdatenfunktion generieren buildData() { var da = { Dates: [],//Datumsdaten, beginnend mit dem 1. aktuellen: '',//Aktuelles Datum MonthFirst: 1,//Den 1. Tag des Monats abrufen gleich der Woche Monat: 0,//Die Tage des aktuellen Monats: 30,//Wie viele Tage gibt es im aktuellen Monat Tag: 0,//Was ist das heutige Datum isSigned: false, //Ob Sie sich heute angemeldet haben signLastDays:3,//Kontinuierliche Anmeldetage signToday: function () { this.dates[this.day].isSigned = true; var ds = [ ]; //Datumsdaten initialisieren var dt = new Date(); da.current = dt.ToString('yyyy Jahr M Monat d Tag'); Date(dt.getFullYear(), dt.getMonth(), 1).getDay(); da.month = dt.getMonth() + 1; da.days = new Date(dt.getFullYear(), parseInt(da. Monat), 0).getDate();//Erhalten Sie die Anzahl der Tage im aktuellen Monat da.day = dt.getDate(); for (var i = 1; i < da.days + 1; i++) { var o = { isSigned: false,//Ob es signiert ist num: i,//Date isToday: i == da.day,//Ob es heute ist isPass: i < da. Tag//Zeit ist vergangen}; ds[i] = o;

Sobald Sie die Daten haben, können Sie sie in eine Schnittstelle konvertieren

 //Datenfunktion renderData(da) { var signDays = document.getElementById('spSignDays'); var root = document.getElementById(signTable); td; var st = da.monthFirst; var date = da.dates = 0; //Bis zu 6 Zeilen für (var i = 0; i < 42; i++) { if (i % 7 == 0) { //Wenn kein Datum vorhanden ist, unterbrechen Sie if (i > (st + da.days) ) break ; tr = document.createElement('tr'); tr.className = 'darkcolor trb'; //Leer vor oder nach if (i < st || !dates[i - st + 1]) { td = document.createElement('td'); td.innerHTML = '<div class=sign-blank><span></span></div>'; appendChild(td); continue; //Füge den Zahlenteil ein var d =dates[i - st + 1]; tdcss = ''; if (d.isToday) tdcss = 'sign-today'; else if (d.isPass) tdcss = 'sign-pass'; 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 ><Polygonpunkte =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); Die letzte Zeile muss hinzugefügt werden, wenn ((st + da.days + 1) / 7 > rowcount) root.appendChild(tr } //Datumsdaten erstellen var da = buildData(); //Render renderData(da);

Copyright

[email protected]

https://github.com/FallStar0/SignSample

https://gitee.com/fallstar/SignSample