Ich habe in letzter Zeit kein Projekt gemacht. Ich habe keine Zeit, eine kleine Demo zu schreiben. Ich bin hier, um sie für Ihre Referenz mit der Wulin Network -Plattform zu teilen. Ich werde mir vergeben, wenn ich diesen Artikel nicht gut schreibe!
Funktionen und Methodenlogik werden im Code kommentiert. Bitte lesen Sie den Code direkt.
Die Effekte sind wie folgt:
Laden Sie ohne weiteres den Code hoch:
JS Teil:
Zuerst zeichnen wir zwei Neun-Dish-Netze, eine für die Anmeldung und die erste Einstellung des Schiebkennworts und das andere für die Einstellung des Schiebkennworts, das zum ersten Mal zum Vergleich mit dem Schiebekennwort verwendet wird, um festzustellen, ob die Kennwörter zwischen den zweimal konsistenten sind.
Der erste neun Klient
$ ("#Gesturepwd"). GesturePasswd ({HintergrundColor: "#252736", // Hintergrundfarbe: "#ffffff", // Hauptkontrollfarbe Roundradii: 25, // Der Radius des großen Punktes, den der große Punkt der großen Punkt, in dem der große Punkt ausgewählt wurde, ist. // Die Breite der gesamten Komponente beträgt 240 // die Höhe der gesamten Komponenten-Linecolor: "#00Aec7", // die Farbe der Benutzerzeile Zindex: 100 // Das CSS Z-Index-Attribut der gesamten Komponente});Das zweite Neun-Käfig-Netz auf die gleiche Weise zeichnen
/// Lade die zweite Funktion getur () {$ ("#Gesturepsa"). Gesturepasswd ({HintergrundColor: "#252736", // Hintergrundfarbe: "#ffffffffffffffffffffffffffffffradii -Hauptkontrollfarbe: Die große Punktbreite: 240, // die Breite der gesamten Komponentenhöhe: 240, // die Höhe der gesamten Komponenten-Linecolor: "#00AEC7", // die Farbe der Benutzerzeile Zindex: 100 // Das CSS Z-Index-Attribut des gesamten Komponenten});}HTML -Teil:
<div> <center> <br> <br> <div id = "Gesturepwd"> </div> <div id = "Gesturepsa" style = "display: none"> </div> </center> </div>
Wenn sich der Benutzer anmeldet, wird die Datenbank über die Geschäftslogikschicht abgefragt, um festzustellen, ob der Kunde das Kennwort mit neun Netz festlegt. Wenn es eingestellt ist, wird die add () -Methode aufgerufen, und wenn sie nicht festgelegt ist, wird die UPUP () -Methode aufgerufen.
<Script> $ (function () {var urlinfo = window.location.href; var userername = urlinfo.split ("_") [1]; (data.msg == "true") {$ ("#pass"). text (data.pass); alert ("Bitte Gestenkennwort eingeben!") add ();} else {alert ("Bitte Gestenkennwort festlegen!") UPUP ();}})}) </script>Wenn der Benutzer es festgelegt hat, führen wir die folgenden Vorgänge aus (rufen Sie die Methode add () auf):
/// Benutzer, die die Gestenkennwortfunktion festgelegt haben, add () {$ ("#Gesturepwd"). On ("HasPasswd", Funktion (e, passwd) {var result; if (passwd == $ ("#pass"). Text ()) {result = true;} sonst {result = false;} if (result == true) true) {$ ("#Gesturepwd"). Trigger ("Passwdright"); setTimeout (function () {// Andere Vorgänge nach der Passwortüberprüfung, öffnen Sie eine neue Seite usw.. Effekt} else {$ ("#Gestenpwd"). Trigger ("Passwdwrong");Hier können wir das Passwort des Kunden in das Nine-Grid-Raster schieben, es herausnehmen (d. H. PASSWD), und wir vergleichen es mit dem Passwort im versteckten Element-Pass. Wenn dies zum nächsten Schritt geht, ist das Login erfolgreich. Weil ich alle Passwörter direkt im Element der Seite auf die Seite stelle. Dies wird in der tatsächlichen Entwicklung nicht empfohlen. Es ist am besten, im Hintergrund zu vergleichen. Wenn Sie dies wollen, verschlüsseln Sie es bitte und betreiben Sie es dann. Wenn der Benutzer es zum ersten Mal festlegt, rufen wir die UPUP -Methode auf
/// Das Gestenkennwort wurde nicht festgelegt, dass die Benutzerfunktion UPUP () {/// beim ersten Mal $ ("#Gesturepwd"). On ("HasPasswd", Funktion (E, Passwd) {$ ("#Pass"). Text (Passwd) Alert ("Bitte eingeben wieder! "); getur (); $ ("#Gesturepwd "). hide ();Hier erhalten wir das Kennwort, das der Benutzer zum ersten Mal festgelegt hat, um es dem Passelement zuzuweisen.
Rufen Sie dann die rekursive Methode auf
/// rekursiv (Looping selbst) Funktion rekursiv () {$ ("#Gesturepsa"). On ("HasPasswd", Funktion (e, passwd) {var urlinfo = window.location.HREF; {$ .ajax ({type: "post", url: ".././home/grtturepassword" {alert (data); $ ("#Gesturepsa"). hide () ;; $ ("#Indexs"). show () ;;}})} else {$ ("#Gesturepsa"). Trigger ("Passwdwrong"); Alert ("zwei Passwörter sind inkonsistent, bitte inkonsistent, bitte inkonsistent, bitte, bitte inkonsistent, bitte, bitte, bitte inkonsistent, bitte, bitte, bitte inkonsistent, bitte, bitte, bitte inkonsistent, bitte, bitte, bitte inkonsistent, bitte, bitte, bitte, bitte inkonsistent, bitte, bitte, bitte, bitte, bitte, bitte inkonsistent, bitte, bitte, bitte, bitte, bitte, bitte, bitte, bitte, bitte, bitte, bitte, bitte, bitte, bitte, bitte, bitte plashting (" passwdwrong "); alert (" zwei kennwörter sind inkonsistent, pleants bitte, bitte plash, bitte Wiedereinzug! ");Wir vergleichen das Kennwort zum zweiten Mal mit dem ersten Mal. Wenn dies gilt, übergeben wir das Passwort über AJAX an den Hintergrund und speichern das Passwort. Wenn die Eingänge für die zweimal unterschiedlich sind, werden wir uns rekursiv vergleichen, bis wir bestanden haben. Natürlich können Sie auch dreimal unterschiedliche Zurücksetzungen festlegen.
Da die Funktion sehr einfach ist, werde ich sie nicht im Detail erklären. Wenn Sie den Quellcode nicht verstehen oder sich nicht verweisen möchten, hinterlassen Sie bitte eine Nachricht. Ich werde eine Kuppel schreiben, die Sie mit Ihnen teilen können.