JS Imitation mobile phone terminal Nine Sudoku login function to achieve code _JAVASCRIPT skills

Recently there is no project to do, free to write a small demo, is hereby share to the cloud Habitat Community Platform for your reference, this article is not good to write the heroes forgive me!

The functionality and method logic are commented in the code. So trouble everyone to see the code directly.

The effect is as follows:

Words not much to say directly on the code:

JS section:

First we draw two nine Sudoku, one for login and for the first time to set the slide password use, another to set the sliding password, used for the first time to enter the sliding password to compare, to determine whether two times the password is consistent

The first nine Sudoku

$ ("#gesturepwd"). GESTUREPASSWD ({
backgroundcolor: "#252736",//Background color
: "#FFFFFF",///main control color
roundradii:25,//radius of the circle point
Pointradii:6,/////The radius of the center of the circle when it is selected
space:30,//The gap between the dots
width:240,//The width of the entire component
height:240,//The height of the entire assembly
linecolor: "#00aec7",//user underline the color of the line
zindex:100//CSS Z-index properties of the entire component

In the same way draw the second nine Sudoku

Load Second
function Getur () {
$ ("#gesturepsa"). GESTUREPASSWD ({
backgroundcolor: "#252736",//Background color
: "#FFFFFF",///main control color
roundradii:25,//radius of the circle point
Pointradii:6,/////The radius of the center of the circle when selected is
space:30,//The gap between the dots
width:240,//The width of the entire component
height:240,//The height of the entire assembly C10/>linecolor: "#00aec7",//user underline the color of the line
zindex:100//CSS Z-index properties of the entire component
});

HTML section:

<div>
<center><br><br>
<div id= "gesturepwd" ></div> 
<div ID = "Gesturepsa" style= "Display:none" ></div>
</center>

Users log in through the business logic layer to query the database to see if the customer set the nine password, if the settings call the Add () method, not set then call the Upup () method.

<script>
$ (function () {
var urlinfo = window.location.href;
var UserName = Urlinfo.split ("_") [1];
$.ajax ({
type: POST),
URL: ".. /.. /home/details ",
dataType: ' json ',
anyc:false,
data: {username:username},
success:function (data) {
if (data.msg = = "True") {
$ ("#pass"). Text (data.pass);
Alert ("Please enter the gesture password!")
Add ();
}
else {
alert ("Please set gesture password!")
Upup ();}}}
)

When the user has set obsolete we do the following (call the Add () method):

User
function Add () {
$ ("#gesturepwd") with gesture password set. On ("haspasswd", Function (E, passwd) {
var result;
if (passwd = = $ ("#pass"). Text ()) {result
= true;
}
else {result
= false;
}
if (result = = True) {
$ ("#gesturepwd"). Trigger ("Passwdright");
settimeout (function () {
//password verification is correct after other operations, open new pages, etc. ...
//alert ("The password is correct!) ")
$ (" #gesturepwd "). Hide ();
$ ("#Indexs"). Show ();;
}, 500; Delay half a second to take care of the visual effect
}
else {
$ ("#gesturepwd"). Trigger ("Passwdwrong");
Other actions after password validation errors ...
}
});

Here we can get the customer to swipe the password in the nine Sudoku, take it out (ie passwd), we compare it with the password in the hidden element pass, if this goes to the next step, the login succeeds. Because it's dome all the passwords I put directly in the elements of the page, in the actual development does not recommend this, preferably in the background to compare, if you want to do so please encrypt after operation. If the user is set for the first time, we call the Upup method

No gesture password has been set user
function Upup () {
///set
$ ("#gesturepwd") for the first time. On ("haspasswd", Function (E, passwd) {
$ ( "#pass"). Text (passwd)
alert ("Please enter again!");
Getur ();
$ ("#gesturepwd"). Hide ();
$ ("#gesturepsa"). Show ();
Set recursive () for the second time
;

Here we get the password for the first time the user slides the setting to assign it to the pass element.

Then call the Recursive method

Recursive (loop-calling itself)
function recursive () {
$ ("#gesturepsa"). On ("haspasswd", Function (E, passwd) {
var urlinfo = Window.location.href;
var UserName = Urlinfo.split ("_") [1];
if (passwd = = $ ("#pass"). Text ()) {
$.ajax ({
type: "POST",
URL: "...) /.. /home/grtturepassword ",
dataType: ' json ',
anyc:false,
data: {gesturepassword:passwd, UserName: UserName},
success:function (data) {
alert (data);
$ ("#gesturepsa"). hide ();;
$ ("#Indexs"). Show ();;
}} else {
$ ("#gesturepsa"). Trigger ("Passwdwrong");
Alert ("Two times password inconsistent, please re-enter!");
$ ("#gesturepsa"). Remove ();
$ ("#gesturepwd"). After ("<div id= ' Gesturepsa ' ></div>")
Getur ();
Recursive ();
}
);

We will set the password for the second time compared with the first time, if the same we will pass the password through Ajax to the background, the password save operation. If two times input is not the same we will be recursively in the call to make a comparison, until passed, of course you can also set up 3 different reset what.

Because the function is very simple does not carry on the detailed explanation, if has not understood or must refer to the source code the message, I will prepare a dome to share with everybody.