Je n'ai fait aucun projet récemment. Je n'ai pas le temps d'écrire une petite démo. Je suis ici pour le partager avec la plate-forme de réseau Wulin pour votre référence. Je vais me pardonner si je n'écris pas bien cet article!
Les fonctions et la logique de la méthode sont commentées dans le code. Veuillez donc lire directement le code.
Les effets sont les suivants:
Sans plus tarder, téléchargez simplement le code:
JS Partie:
Nous dessinons d'abord deux grilles à neuf canons, l'une pour la connexion et le premier réglage du mot de passe coulissant, et l'autre pour le réglage du mot de passe coulissant, qui est utilisé pour comparer le mot de passe coulissant saisi pour la première fois pour déterminer si les mots de passe sont cohérents entre les deux fois.
Les neuf premiers clients
$("#gesturepwd").GesturePasswd({backgroundColor: "#252736", //Background color: "#FFFFFF", //Main control color roundRadii: 25, //The radius of the large dot pointRadii: 6, //The radius of the center displayed when the large dot is selected is space: 30, //The gap between the large dot width: 240, //The La hauteur de largeur de l'ensemble du composant est de 240, // la hauteur du composant entier LineColor: "# 00AEC7", // La couleur de la ligne de l'utilisateur Zindex: 100 // l'attribut CSS Z-Index de l'ensemble du composant});Dessiner la deuxième grille de neuf cage de la même manière
/// Chargez la deuxième fonction getUR () {$ ("# gesturepsa"). Gesturepasswd ({backgroundColor: "# 252736", // Couleur d'arrière-plan: "#ffffff", // couleur de contrôle principale Roundradii: 25, // le radius du grand point de pointradi: 6, // le radius du centre affiché lorsque le grand point est sélectionné: 30, // le radius du centre affiché lorsque le grand point est sélectionné: 30, // Le Radius du centre affiché lorsque le grand point est sélectionné: 30, // Le Radius du centre affiché lorsque le grand point est sélectionné: 30. La grande largeur de points: 240, // la largeur de la hauteur du composant entier: 240, // la hauteur de la composante entière LineColor: "# 00AEC7", // La couleur de la ligne de l'utilisateur Zindex: 100 // l'attribut CSS Z-Index de l'ensemble du composant});};HTML PARTIE:
<div> <enter> <br> <br> <div id = "gesturepwd"> </div> <div id = "gesturepsa" style = "affiche: aucun"> </div> </ centr> </div>
Lorsque l'utilisateur se connecte, la base de données est interrogée via la couche logique métier pour voir si le client définit le mot de passe à neuf grilles. S'il est défini, la méthode Add () est appelée, et si elle n'est pas définie, la méthode upup () est appelée.
<script> $ (function () {var urlinfo = window.location.href; var username = urlinfo.split ("_") [1]; $ .ajax ({type: "post", url: "../../home/details",Datatype: 'JSON', anyc: falsi (data.msg == "true") {$ ("# pass"). text (data.pass); alert ("s'il vous plaît entrez le mot de passe geste!") Add ();} else {alert ("Veuillez définir le mot de passe geste!")Lorsque l'utilisateur l'a défini, nous effectuons les opérations suivantes (appelez la méthode Add ()):
/// les utilisateurs qui ont défini la fonction de mot de passe gesture add () {$ ("# gesturepwd"). Sur ("haspasswd", fonction (e, passwd) {var result; if (passwd == $ ("# pass"). Text ()) {result = true;} else {result = false;} if (result == true) {$ ("# gesturepwd"). trigger ("passwDrright"); setTimeout (function () {// autres opérations après la vérification du mot de passe, "# gesturepwd"). Hide (); $ ("# index"). Effect} else {$ ("# gesturepwd"). Trigger ("passwdwrong"); // autres opérations après la vérification du mot de passe.Ici, nous pouvons faire glisser le mot de passe du client dans la grille à neuf grilles, le retirer (c'est-à-dire Passwd), et nous le comparons avec le mot de passe dans le col caché. Si cela passe à l'étape suivante, la connexion est réussie. Parce que je mets tous les mots de passe sur la page directement dans l'élément de la page. Ceci n'est pas recommandé dans le développement réel. Il est préférable de comparer en arrière-plan. Si vous le souhaitez, veuillez le crypter puis le faire fonctionner. Si l'utilisateur le définit pour la première fois, nous appelons la méthode UPUP
/// Le mot de passe gesture n'a pas été défini la fonction utilisateur upup () {/// la première fois définissant $ ("# gesturepwd"). Sur ("haspasswd", fonction (e, passwd) {$ ("# pass"). Text (passwd) alert ("s'il vous plaît entrez Encore une fois! "); getur (); $ (" # gesturepwd "). hide (); $ (" # gesturepsa "). show ();}); /// le deuxième réglage récursif ();}Ici, nous obtenons le mot de passe défini par l'utilisateur pour la première fois pour le affecter à l'élément de passe.
Puis appelez la méthode récursive
/// Recursive (Looping lui-même) fonction récursive () {$ ("# gesturepsa"). Sur ("haspasswd", function (e, passwd) {var urlinfo = window.location.href; var username = urlinfo.split ("_") [1]; if (passwd == $ ("# pass").). ? {alert (data); $ ("# gesturepsa"). hide () ;; $ ("# indexs"). show () ;;}})} else {$ ("# gesturepsa"). Trigger ("passwdwrong"); alert ("Deux mots de passe sont incompatibles, s'il vous plaît, s'il vous plaît rentrez! "); $ (" # gesturepsa "). retire (); $ (" # gesturepwd "). After (" <div id = 'gesturepsa'> </div> ") getur (); récursif ();}});}Nous comparons l'ensemble de mot de passe pour la deuxième fois avec la première fois. Si la même chose est vraie, nous passerons le mot de passe à l'arrière-plan via AJAX et enregistrerons le mot de passe. Si les entrées sont différentes pour les deux fois, nous nous comparerons par récursivement jusqu'à ce que nous passions. Bien sûr, vous pouvez également définir différentes réinitialisations 3 fois.
Étant donné que la fonction est très simple, je ne l'expliquerai pas en détail. Si vous ne comprenez pas ou ne souhaitez pas vous référer au code source, veuillez laisser un message. J'écrirai un dôme à partager avec vous.