Я не сделал никакого проекта в последнее время. У меня нет времени написать небольшую демонстрацию. Я здесь, чтобы поделиться им с сетевой платформой Wulin для вашей ссылки. Я прощу меня, если я не напишу эту статью хорошо!
Функции и логика методов комментируются в коде. Поэтому, пожалуйста, прочитайте код напрямую.
Эффекты следующие:
Без лишних слов просто загрузите код:
JS Часть:
Сначала мы нарисуем две сетки с девятью отделами, одну для входа в систему и первое настройку скользящего пароля, а другую для снова настройки скользящего пароля, который используется для сравнения с скользящим паролем, введенным впервые, чтобы определить, соответствуют ли пароли между двумя разами.
Первый девять клиентов
$ ("#gesturePwd"). GesturePasswd ({founalcolor: "#252736", // Цвет фона: "#ffffff", // Основной цвет управления Roundradii: 25, // Радиус большой точки pointradi: 6, // радиус центра, который отображается, когда большая точка выбирается. Высота ширины всего компонента составляет 240, // высота всего компонента LineColor: "#00AEC7", // цвет линии пользователя ZINDEX: 100 // атрибут CSS Z-Index всего компонента});Рисовать вторую сетку с девятью клетки таким же образом
/// Загрузите вторую функцию getur () {$ ("#gesturepsa"). GesturePasswd ({founalColor: "#252736", // Цвет фона: "#ffffff", // Основной цветовой раундж -раундж: 25, // Радиус большой точки Pointradii: 6, // Радиус. Большая точка ширина: 240, // ширина всей высоты компонента: 240, // высота всего компонента LineColor: "#00AEC7", // Цвет линии пользователя ZINDEX: 100 // Атрибут CSS Z-Index всего компонента});};};};};};HTML часть:
<div> <Center> <br> <br> <div id = "gesturePwd"> </div> <div id = "gesturepsa" style = "display: none"> </div> </center> </div>
Когда пользователь входит в систему, база данных запрашивается через уровень бизнес-логики, чтобы увидеть, устанавливает ли клиент пароль с девятью сети. Если он установлен, метод add () вызывается, и если он не установлен, метод upup () вызывается.
<script> $ (function () {var urlinfo = window.location.href; var username = urlinfo.split ("_") [1]; $ .ajax ({type: "post", url: ".../../home/details", datatype: 'json', anyc: false, data: username: usermame: usermame: usermame: usermame: username: usermame: username: username: {if (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 = forse;} if (result == true) {result = true; {$ ("#GesturePwd"). Trigger ("passwdright"); settimeout (function () {// Другие операции после проверки пароля верны, откройте новую страницу и т. Д. // Alert («Пароль правильный!») Эффект} else {$ ("#GesturePwd").Здесь мы можем получить пароль клиента, скользящего в сетке с девятью сети, вывести его (т.е. passwd), и сравниваем его с паролем в проходе скрытого элемента. Если это пойдет на следующий шаг, вход в систему успешно. Потому что я помещаю все пароли на страницу непосредственно в элемент страницы. Это не рекомендуется в реальной разработке. Лучше всего сравнить в фоновом режиме. Если вы хотите это, пожалуйста, зашифруйте его, а затем управляйте им. Если пользователь устанавливает его в первый раз, мы вызываем метод поднятия
/// Пароль жеста не был установлен пользовательским функциям upup () {/// В первый раз настройка $ ("#gesturepwd"). On ("haspasswd", function (e, passwd) {$ ("#pass"). Снова! "); getur (); $ ("#GesturePwd "). Hide (); $ ("#Gesturepsa "). Show ();}); /// Второе время настройки recurusive ();}Здесь мы впервые получаем пароль, чтобы назначить его элементу Pass.
Затем вызовите рекурсивный метод
/// Рекурсивное (сама петля) функция recurisive () {$ ("#gesturepsa"). On ("haspasswd", function (e, passwd) {var urlinfo = window.location.href; var username = urlinfo.split ("_") [1]; Если (passwd == $ ("#pass"). {$ .ajax ({type: "post", url: "../../home/grtutepassword", datatype: 'json', anyc: false, data: {gesturepassword: passwd, username: имя пользователя}, успех: функция (данные) {alert (data); $ ("#gesturepsa"). hide () ;; $ ("#indexs"). show () ;;}})} else {$ ("#gesturepsa"). Trigger ("passwdwrong"); alert ("Два пароли несостоятельны, пожалуйста повторно включить! "); $ ("#gesturepsa "). remove (); $ ("#GesturePwd "). After (" <div id = 'gesturepsa'> </div> ") getur (); recurive ();}});};};};};};};};};};};};Мы сравниваем пароль, установленную во второй раз с первым раз. Если то же самое верно, мы передадим пароль на фон через Ajax и сохраните пароль. Если входные данные отличаются в течение двух раз, мы будем сравнивать себя рекурсивно, пока не пройдем. Конечно, вы также можете установить разные сбросы 3 раза.
Поскольку функция очень проста, я не буду объяснять ее подробно. Если вы не понимаете или не хотите обратиться к исходному коду, оставьте сообщение. Я напишу купол, чтобы поделиться с вами.