Não fiz nenhum projeto recentemente. Não tenho tempo para escrever uma pequena demonstração. Estou aqui para compartilhá -lo com a plataforma de rede Wulin para sua referência. Vou me perdoar se não escrever bem este artigo!
Funções e lógica de método são comentadas no código. Então, leia o código diretamente.
Os efeitos são os seguintes:
Sem mais delongas, basta fazer o upload do código:
Parte do JS:
Primeiro, desenhamos duas grades de nove dias, uma para login e primeira configuração de senha deslizante e a outra para definir a senha deslizante novamente, que é usada para comparar com a senha deslizante inserida pela primeira vez para determinar se as senhas são consistentes entre as duas vezes.
Os primeiros nove client
$("#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, // A altura da largura de todo o componente é 240, // a altura de todo o componente LineColor: "#00AEC7", // a cor da linha do usuário zindex: 100 // O atributo Z-Index CSS de todo o componente});Desenhando a segunda grade de nove gaiolas da mesma maneira
/// Carregar a segunda função getur () {$ ("#gesturepsa"). Gesturepasswd ({BackgroundColor: "#252736", // cor de fundo: "#ffffff", // controle principal roundRadii: 25, // o raio do grande ponto Pointadii: 6, // lacuna entre a grande largura do ponto: 240, // a largura de toda a altura do componente: 240, // a altura de todo o componente LineColor: "#00AEC7", // a cor da linha do usuário zindex: 100 // o atributo CSS Z-Index de todo o componente});}Parte HTML:
<div> <Center> <br> <br> <div id = "gesturepwd"> </div> <div id = "gesturepsa" style = "display: none"> </div> </stent> </div>
Quando o usuário faz login, o banco de dados é consultado através da camada lógica de negócios para verificar se o cliente define a senha de nove grades. Se estiver definido, o método Add () será chamado e, se não estiver definido, o método upup () será chamado.
<SCRIPT> $ (function () {var urlinfo = window.Location.href; var username = urlinfo.split ("_") [1]; $ .ajax ({type: "post", url: "../../home/details".datatype: 'json', qualquer outro (data.msg == "true") {$ ("#pass"). text (data.pass); alert ("por favor, insira a senha do gesto!") Add ();} else {alert ("Por favor, defina a senha do gesto!") upup ();}}})}) </script>Quando o usuário o definir, executamos as seguintes operações (ligue para o método add ()):
/// usuários que definiram a função de senha de gesto add () {$ ("#gesturepwd"). ON ("haspasswd", function (e, passwd) {var resultado; if (passwd == $ ("#pass"). Text ()) {resultado =; {$ ("#gesturepwd"). Trigger ("passwdright"); setTimeout (function () {// Outras operações após a verificação de senha está correta, abra uma nova página, etc. // alerta ("senha está correta! efeito} else {$ ("#gesturepwd").Aqui podemos obter a senha do cliente deslizando na grade de nove grade, retirá-la (ou seja, passada) e a comparamos com a senha no passe oculto do elemento. Se isso for para a próxima etapa, o login será bem -sucedido. Porque eu coloco todas as senhas na página diretamente no elemento da página. Isso não é recomendado no desenvolvimento real. É melhor comparar em segundo plano. Se você quiser, criptografá -lo e opere -o. Se o usuário definir pela primeira vez, chamamos o método upup
/// A senha do gesto não foi definida função do usuário upup () {/// a primeira vez que configura $ ("#gesturepwd"). novamente! "); getur (); $ ("#gesturepwd "). hide (); $ ("#gesturepsa "). show ();}); /// a segunda vez que se configura Recursive ();}Aqui, temos a senha configurada pelo usuário pela primeira vez para atribuí -la ao elemento Pass.
Então chame o método recursivo
/// Recursive (em si) função Recursive () {$ ("#gesturepsa"). On ("haspasswd", function (e, passwd) {var urlinfo = window.location.href; var username = urlinfo.split ("_) [1] se (passw) {$ .ajax ({type: "post", url: "../../home/grtturepassword",Datatype: 'json', anyc: false, dados: {gesturepassword: passwd, nome de usuário: nome de usuário}, sucess: function (dados) {alert (dados); $ ("#gesturepsa"). hide () ;; $ ("#indexs"). show () ;;}})} else {$ ("#gesturepsa"). novamente! "); $ ("#gesturepsa "). remover (); $ ("#gesturepwd "). Depois (" <div id = 'gesturepsa'> </div> ") getur (); recursive ();}});}Comparamos a senha definida pela segunda vez com a primeira vez. Se o mesmo for verdadeiro, passaremos a senha para o plano de fundo através do Ajax e salvaremos a senha. Se as entradas forem diferentes para as duas vezes, nos compararemos recursivamente até passarmos. Obviamente, você também pode definir redefinições diferentes 3 vezes.
Como a função é muito simples, não a explicarei em detalhes. Se você não entende ou deseja consultar o código -fonte, deixe uma mensagem. Vou escrever uma cúpula para compartilhar com você.