나는 최근에 어떤 프로젝트도하지 않았다. 작은 데모를 쓸 시간이 없습니다. 나는 당신의 참조를 위해 Wulin 네트워크 플랫폼과 공유하기 위해 왔습니다. 이 기사를 잘 쓰지 않으면 용서하겠습니다!
함수 및 메소드 논리는 코드에 주석입니다. 따라서 코드를 직접 읽으십시오.
효과는 다음과 같습니다.
더 이상 고민하지 않고 코드를 업로드하기 만하면됩니다.
JS 부분 :
먼저 9 개의 9 가지 그리드, 하나는 로그인 용 및 첫 번째 슬라이딩 암호의 첫 번째 설정, 다른 하나는 슬라이딩 암호를 다시 설정하는 데 사용되는데, 이는 비밀번호가 처음으로 입력 된 슬라이딩 암호와 비교하는 데 사용됩니다.
첫 9 명
$ ( "#gesturepwd"). gesturepasswd ({backgroundColor : "#252736", // 배경색 : // "#ffffff", // 메인 제어 색상 RoundRadii : 25, // 큰 도트 pointradii : 6, // 큰 도트의 반경이 공간을 선택할 때 표시됩니다. 전체 구성 요소의 너비 높이는 240, // 전체 구성 요소 Linecolor의 높이 : "#00aec7", // 사용자 선 zindex의 색상 : 100 // 전체 구성 요소의 CSS Z-index 속성});같은 방식으로 두 번째 9-Cage 그리드를 그리십시오
/// 두 번째 함수 getur () {$ ( "#gesturepsa"). gesturepasswd ({backgroundcolor : "#252736", // 배경색 : "#ffffff", // 메인 제어 색상 RoundRadii : 25, // 큰 도트의 반경이 중심 사이에 표시 될 때, // 큰 점 너비 : 240, // 전체 구성 요소 높이의 폭HTML 부분 :
<div> <center> <br> <br> <div id = "gesturepwd"> </div> <div id = "gesturepsa"style = "display : none"> </div> </center> </div>
사용자가 로그인하면 데이터베이스가 비즈니스 로직 계층을 통해 쿼리되어 고객이 9 그리드 암호를 설정하는지 확인합니다. 설정되면 add () 메소드가 호출되고 설정되지 않으면 upup () 메소드가 호출됩니다.
<script> $ (function () {var urlinfo = window.location.href; var username = urlinfo.split ( "_") (data.msg == "true") {$ ( "#pass"). text (data.pass); alert ( "제스처 암호를 입력하십시오!") add ();} else {alert ( "제스처 암호를 설정하십시오!") upup ();}}) </script>사용자가 설정하면 다음 작업을 수행합니다 (add () 메소드 호출) :
/// 제스처 암호 함수 기능 add () {$ ( "#gesturepwd"). on ( "haspasswd", function (e, passwd) {var result; if (passwd == $ ( "#pass"). text ()) {result = true} else {result = false;} if (result == true) if {$ ( "#gesturepwd"). trigger ( "passwdright"); settimeout (function () {// 비밀번호 검증 후 기타 작업이 정확합니다. 새 페이지를 엽니 다. // alert ( "password!") $ ( "#gesturepwd"); $ ( "#index"); else { "#gesturepwd". 트리거 ( "Passwdwrong");여기서 우리는 9 그리드 그리드에서 슬라이딩 슬라이딩의 비밀번호를 얻을 수 있고 (예 : Passwd), 숨겨진 요소 패스의 비밀번호와 비교할 수 있습니다. 이것이 다음 단계로 이동하면 로그인이 성공적입니다. 페이지에 모든 비밀번호를 페이지 요소에 직접 넣었 기 때문입니다. 실제 개발에는 권장되지 않습니다. 백그라운드에서 비교하는 것이 가장 좋습니다. 이것을 원한다면 암호화 한 다음 작동하십시오. 사용자가 처음으로 설정하면 UPUP 메소드를 호출합니다.
/// 제스처 비밀번호가 설정되지 않았다. 사용자 함수 upup () {// 처음으로 $ ( "#gesturepwd"). on ( "haspasswd", function (e, passwd) {$ ( "#pass"). text (passwd) Alert ( "입력하십시오. 다시! "); getur (); $ ("#gesturepwd "). hide (); $ ("#gesturepsa "). show ();}); /// 두 번째로 recursive ();}여기서 우리는 사용자가 처음으로 패스 요소에 할당하기 위해 설정 한 비밀번호를 얻습니다.
그런 다음 재귀 방법을 호출하십시오
/// recursive (루핑 자체) 함수 재귀 () {$ ( "#gesturepsa"). on ( "haspasswd", function (e, passwd) {var urlinfo = wind {$ .ajax ({type : "post", url : "../../home/grtturepassword",Datatitype : 'json', anyc : false, data : {gesturepassword : passwd, username : username}, success : function (data) {alert (data); $ ( "#gesturepsa"). hide () ;; $ ( "#index"). show () ;;}})} else {$ ( "#gesturepsa"). 트리거 ( "passwdwrong"); Alert ( "두 암호는 일치하지 않습니다 재 앙상자! "); $ ("#gesturepsa "). 제거 (); $ ("#gesturepwd "). After ("<div id = 'gesturepsa'> </div> ") getur (); recursive ();}};}두 번째로 비밀번호 세트를 처음으로 비교합니다. 마찬가지라면 Ajax를 통해 암호를 배경으로 전달하고 비밀번호를 저장합니다. 입력이 두 번 다른 경우, 우리는 통과 할 때까지 재귀 적으로 자신을 비교할 것입니다. 물론, 다른 리셋을 3 번 설정할 수도 있습니다.
이 기능은 매우 간단하기 때문에 자세히 설명하지 않습니다. 소스 코드를 이해하지 못하거나 참조하려면 메시지를 남겨주세요. 나는 당신과 나누기 위해 돔을 쓸 것입니다.