I haven't done any project recently. I have no time to write a small demo. I'm here to share it with the Wulin Network platform for your reference. I'll forgive me if I don't write this article well!
Functions and method logic are commented in the code. So please read the code directly.
The effects are as follows:
Without further ado, just upload the code:
js part:
First we draw two nine-dish grids, one for login and first setting of sliding password, and the other for setting of sliding password again, which is used to compare with the sliding password entered for the first time to determine whether the passwords are consistent between the two times.
The first nine-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, //The width height of the entire component is 240, //The height of the entire component lineColor: "#00aec7", //The color of the user's line zindex: 100 //The css z-index attribute of the entire component});Drawing the second nine-cage grid in the same way
///Load the second function getur() {$("#gesturepsa").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, //The width of the entire component height: 240, //The height of the entire component lineColor: "#00aec7", //The color of the user's line zindex: 100 //The css z-index attribute of the entire component});}html part:
<div><center><br><br><div id="gesturepwd"></div> <div id="gesturepsa" style="display:none"></div></center></div>
When the user logs in, the database is queried through the business logic layer to see if the customer sets the nine-grid password. If it is set, the add() method is called, and if it 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("Please enter gesture password!")add();}else {alert("Please set gesture password!")upup();}}})})</script>When the user has set it out, we perform the following operations (call the add() method):
///Users who have set gesture password function add() {$("#gesturepwd").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 password verification is correct, open a new page, etc. . //alert("Password is correct!")$("#gesturepwd").hide();$("#Indexs").show();;}, 500); //Delay for half a second to take care of the visual effect}else {$("#gesturepwd").trigger("passwdWrong");//Other operations after password verification is error. . . }});}Here we can get the password of the customer sliding in the nine-grid grid, take it out (i.e. passwd), and we compare it with the password in the hidden element pass. If this goes to the next step, the login is successful. Because I put all the passwords on the page directly in the element of the page. This is not recommended in actual development. It is best to compare in the background. If you want this, please encrypt it and then operate it. If the user sets it for the first time, we call the upup method
///The gesture password has not been set User function upup() {///The first time setting $("#gesturepwd").on("hasPasswd", function (e, passwd) {$("#pass").text(passwd)alert("Please enter again!");getur();$("#gesturepwd").hide();$("#gesturepsa").show();});///The second time setting Recursive();}Here we get the password set by the user for the first time to assign it to the pass element.
Then call the Recursive method
///Recursive (looping 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 passwords are inconsistent, please re-enter!");$("#gesturepsa").remove();$("#gesturepwd").after("<div id='gesturepsa'></div>")getur();Recursive();}});}We compare the password set for the second time with the first time. If the same is true, we will pass the password to the background through ajax and save the password. If the inputs are different for the two times, we will compare ourselves by recursively until we pass. Of course, you can also set different resets 3 times.
Since the function is very simple, I will not explain it in detail. If you don’t understand or want to refer to the source code, please leave a message. I will write a dome to share with you.