No he hecho ningún proyecto recientemente. No tengo tiempo para escribir una pequeña demostración. Estoy aquí para compartirlo con la plataforma Wulin Network para su referencia. ¡Me perdonaré si no escribo bien este artículo!
Las funciones y la lógica del método se comentan en el código. Así que lea el código directamente.
Los efectos son los siguientes:
Sin más ADO, simplemente suba el código:
JS PARTE:
Primero dibujamos dos cuadrículas de nueve platos, una para iniciar sesión y la primera configuración de contraseña deslizante, y la otra para configurar nuevamente la contraseña deslizante, que se utiliza para comparar con la contraseña deslizante ingresada por primera vez para determinar si las contraseñas son consistentes entre las dos veces.
El primer cliente nueve
$ ("#GesturePwd"). GesturePasswd ({BackgroundColor: "#252736", // Background Color: "#FFFFFFF", // Color de control principal Roundradii: 25, // El radio del punto grande Pointradii: 6, // El radio del centro se muestra cuando el Dot grande es el espacio: 30, // El Gap entre el Gap entre el Gap, el Gap, el Gap, el Gap, el Gap, el Gap, el Gap, el Gap, el Barmón: el Radio, el Radius que se muestra en el Centro se muestra cuando se selecciona el Dot grande: 30, 30, // El Gap entre el Gap, el Gap, el Gap, el Gap, el Gap, el Gap, el Gap, el Gap, el Gap, el Gap, el Radio, el Radius que se muestra en el Centro se muestra. La altura de ancho de todo el componente es 240, // La altura del componente completo Linecolor: "#00AEC7", // El color de la línea del usuario Zindex: 100 // el atributo CSS Z-Index de todo el componente});Dibujando la segunda cuadrícula de nueve cazas de la misma manera
/// Cargue la segunda función getur () {$ ("#gestureSsa"). GesturePasswd ({en segundo plano: "#252736", // Color de fondo: "#ffffff", // Color de control principal Roundradii: 25, // El radio de los puntos grandes Pointradii: 6, // El centro de la rumia se selecciona el espacio grande que el espacio es el Gap Gap, el espacio de la radio. Ancho de puntos grandes: 240, // El ancho de toda la altura del componente: 240, // La altura del componente completo Linecolor: "#00AEC7", // El color de la línea del usuario Zindex: 100 // El atributo CSS Z-Index de todo el componente});}Parte de HTML:
<Viv> <center> <br> <br> <div id = "gesturePwd"> </div> <div id = "gestepsa" style = "display: none"> </div> </center> </div>
Cuando el usuario inicia sesión, la base de datos se consulta a través de la capa de lógica de negocios para ver si el cliente establece la contraseña de nueve cuadrículas. Si se establece, se llama al método add (), y si no está configurado, se llama al método UPUP ().
<scritch> $ (function () {var urlinfo = window.location.href; var userName = urlinfo.split ("_") [1]; $ .AJAX ({type: "post", url: "../../home/details, datataType: 'json', oyc: falso, data: {username: nombre: nombre de usuario:}, screat (data) (data.msg == "true") {$ ("#pase"). Text (data.pass); alert ("¡Ingrese la contraseña de gestos!") add ();} else {alert ("¡Establezca la contraseña de gestos!")Cuando el usuario lo ha configurado, realizamos las siguientes operaciones (llame al método add ()):
/// Usuarios que han establecido la función de contraseña de gestura add () {$ ("#gesturePwd"). On ("Haspasswd", function (e, passwd) {var result; if (passwd == $ ("#pass"). Text ()) {resultado = true;} else {result = false;} if (resultado == True) {$ ("#GesturePWD"). Trigger ("PassWDright"); setTimeOut (function () {// Otras operaciones después de la verificación de contraseña es correcta, abra una nueva página, etc. // alerta ("La contraseña es correcta") $ ("#gestePwd"). Hide (); $ ("#índice"). show () ;;}, 500); Effect} else {$ ("#GesturePwd"). Trigger ("PassWDWrong"); // Otras operaciones después de la verificación de la contraseña es el error.Aquí podemos obtener la contraseña del cliente deslizándose en la cuadrícula de nueve cuadrículas, sacarla (es decir, passwd), y la comparamos con la contraseña en el pase de elementos ocultos. Si esto va al siguiente paso, el inicio de sesión es exitoso. Porque pongo todas las contraseñas en la página directamente en el elemento de la página. Esto no se recomienda en el desarrollo real. Es mejor comparar en segundo plano. Si desea esto, cídelo y luego opere. Si el usuario lo configura por primera vez, llamamos al método UPUP
/// La contraseña de gestos no se ha establecido la función de usuario upup () {/// la primera vez configurando $ ("#gesturePwd"). On ("Haspasswd", function (e, passwd) {$ ("#pass"). Text (passwd) alerta ("por favor ingrese de nuevo! "); getUr (); $ ("#gesturePwd "). Hide (); $ ("#GesturePsa "). Show ();}); /// La segunda configuración de tiempo recursiva ();}Aquí obtenemos la contraseña establecida por el usuario por primera vez para asignarla al elemento PASS.
Luego llame al método recursivo
/// función recursiva (bucle en sí misma) recursiva () {$ ("#gestEpsa"). On ("Haspasswd", function (e, passwd) {var urlinfo = window.location.href; var userername = urlinfo.split ("_") [1]; if ((" {$ .AJAX ({type: "post", url: "../../home/grtturepassword",datatype: 'json', anyc: false, data: {gesturepassword: passwd, username: nombre de usuario}, éxito: función (datos) {alerta (datos); $ ("#gestureSsa"). Hide () ;; $ ("#indexs"). show () ;;}})} else {$ ("#gestepsa"). Trigger ("passwdwrong"); alert ("dos contraseñas son incontrientes, por favor Reenter! "); $ ("#gestepsa "). remove (); $ ("#gesturePwd "). After (" <div id = 'gestepsa'> </div> ") getur (); recursivo ();}});}Comparamos la contraseña establecida por segunda vez con la primera vez. Si lo mismo es verdadero, pasaremos la contraseña al fondo a través de AJAX y guardaremos la contraseña. Si las entradas son diferentes para las dos veces, nos compararemos recursivamente hasta que pasemos. Por supuesto, también puede establecer diferentes restos 3 veces.
Dado que la función es muy simple, no la explicaré en detalle. Si no comprende o desea consultar el código fuente, deje un mensaje. Escribiré un domo para compartir contigo.