JS imitates the mobile phone terminal's nine-cell login function to implement code _ javascript skills

This article describes how to use JS to simulate the Code Implementation of the mobile phone terminal's nine-cell login function. If you need it, you can refer to the projects that have not been done recently and write a small demo, I would like to share with you the script home platform for your reference. If this article is not well written, please forgive me!

The function and method logic are all commented in the code. So please read the code directly.

The effect is as follows:

Let's talk about the Code directly:

Js section:

First, we will draw two nine cells, one for login and the first for sliding password, and the other for setting a sliding password again for comparison with the first sliding password, determine whether the two passwords are consistent

The first jiugongge

$ ("# Gesturepwd "). gesturePasswd ({backgroundColor: "#252736", // background color: "# FFFFFF", // main control color roundRadii: 25, // radius of the Grand Circle pointRadii: 6, // The center radius of the center displayed when a large circle is selected: 30, // The gap width between the large circle points: 240, // The width of the entire component height: 240, // The height of the entire component lineColor: "#00aec7", // The user draws the line color zindex: 100 // css z-index attribute of the entire component });

Draw the second jiugongge in the same way

/// Load the second function getur () {$ ("# gesturepsa "). gesturePasswd ({backgroundColor: "#252736", // background color: "# FFFFFF", // main control color roundRadii: 25, // radius of the Grand Circle pointRadii: 6, // The center radius of the center displayed when a large circle is selected: 30, // The gap width between the large circle points: 240, // The width of the entire component height: 240, // The height of the entire component lineColor: "#00aec7", // The user draws the line color zindex: 100 // css z-index attribute of the entire component });}

Html section:

When a user logs on to the database, the database is queried through the business logic layer to check whether the customer has set the jiugongge password. If the password is set, the add () method is called. If the password is not set, the upup () method is called.

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 ("Enter the gesture password! ") Add ();} else {alert (" set the gesture password! ") Upup () ;}})}) script

When the user has set an expiration date, perform the following operations (call the add () method ):

/// Function add () {$ ("# gesturepwd") of the user who has set the gesture password "). on ("hasPasswd", function (e, passwd) {var result; if (passwd ==$ ("# pass "). text () {result = true;} else {result = false;} if (result = true) {$ ("# gesturepwd "). trigger ("passwdRight"); setTimeout (function () {// other operations after the password is verified correctly, open a new page, and so on... // Alert ("the password is correct! ") $ (" # Gesturepwd "). hide (); $ ("# Indexs "). show () ;}, 500); // wait for half a second to take care of visual effects} else {$ ("# gesturepwd "). trigger ("passwdWrong"); // other actions after incorrect password verification ...}});}

Here, we can obtain the customer's password for sliding on the 9ugong lattice and obtain it (passwd). We will compare it with the password in the hidden element pass. If this is the same, we will proceed to the next step, the logon is successful. Because all the passwords in dome are directly stored in the page elements, this is not recommended in actual development. It is best to compare them in the background. If you want to do this, encrypt the passwords and then perform the operations. If you set it for the first time, we call the upup method.

/// No gesture password set. User function upup () {// set $ ("# gesturepwd") for the first time "). on ("hasPasswd", function (e, passwd) {$ ("# pass "). text (passwd) alert ("Enter it again! "); Getur (); $ (" # gesturepwd "). hide (); $ ("# gesturepsa "). show () ;}); // set Recursive () for the second time ();}

Here we get the password set by the user's first sliding to assign it to the pass element.

Then call the Recursive method.

/// Recursion (loop call yourself) 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 ("the two passwords are inconsistent. Please enter them again! "); $ (" # Gesturepsa "). remove (); $ (" # gesturepwd "). after ("
") Getur (); Recursive ();}});}

We will compare the password set for the second time with the first time. If the password is the same, we will upload it to the background through ajax to save the password. If the two inputs are different, we will use recursion to compare our calls until we pass the call. Of course, you can set three different re-settings.

Because the function is very simple, I will not explain it in detail. If you do not understand it or want to refer to the source code, please leave a message, I will write a dome to share with you.