私は最近プロジェクトをしていません。小さなデモを書く時間はありません。私はあなたの参照のためにそれをウリンネットワークプラットフォームと共有するためにここにいます。この記事を上手に書いていない場合は許してください！
関数とメソッドロジックはコードにコメントされています。コードを直接読んでください。
効果は次のとおりです。
これ以上苦労せずに、コードをアップロードするだけです。
JSパート：
最初に、2つの9つのグリッドを描画します。1つはログインとスライドパスワードの最初の設定、もう1つはスライドパスワードの設定用です。これは、入力されたスライドパスワードと初めて2回の間で一貫しているかどうかを判断するために使用されます。
最初の9クライアント
$（ "＃gesturepwd"）。gesturepasswd（{backgroundcolor： "＃252736"、// background color： "#ffffff"、//メインコントロールカラーラウンドラディー：25、//大きなドットポイントレイディの半径240、//コンポーネント全体の幅の高さは240、//コンポーネントlinecolor全体の高さ： "＃00AEC7"、//ユーザーのラインの色Zindex：100 //コンポーネント全体のCSS Z-Index属性}）;同じ方法で2番目の9ケージグリッドを描画します
/// 2番目の関数getur（）{$（ "＃gesturepsa"）。gesturepasswd（{backgroundcolor： "＃252736"、// background color： "#ffffff"、//メインコントロールカラーラウンドラディー：25、//大きなdot pointradiiの半径の半径： //大きなドット幅の間のギャップ：240、//コンポーネント全体の幅の幅：240、//コンポーネントlinecolor全体の高さ： "＃00AEC7"、//ユーザーのラインの色Zindex：100 // CSS z-index属性全体のCSS z-index属性}）;};};};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 = windocy.location.href; var username = urlinfo.split（ "_"）[1]; $ .ajax（{fot： "post"、url： "..///home/details"、datatype： 'json'、ayc：fals：fals：fals：username：username：username：username：username：username：username：username： （data.msg == "true"）{$（ "＃pass"）。text（data.pass）; alert（ "ジェスチャーパスワードを入力してください！"）add（）;} else {alert（ "gesture password！"）upup（）}}}）</scrip>ユーザーがそれを設定したら、次の操作を実行します（ADD（）メソッドを呼び出してください）：
///ジェスチャーパスワード機能を設定したユーザーfunction add（）{$（ "＃gesturepwd"）。 {$（ "＃gesturepwd"）。trigger（ "passwdright"）; setimeout（//パスワード検証後の操作、新しいページなどを開きます。 Effect {$（ "＃gesturepwd"）。ここでは、顧客のパスワードを9グリッドグリッドでスライドさせ、それを取り出し（つまりpasswd）、非表示の要素パスのパスワードと比較できます。これが次のステップに進むと、ログインが成功します。ページ上のすべてのパスワードをページの要素に直接配置するからです。これは実際の開発では推奨されません。バックグラウンドで比較するのが最善です。これが必要な場合は、暗号化してから操作してください。ユーザーが初めて設定した場合、アップアップメソッドを呼び出します
///ジェスチャーパスワードが設定されていませんユーザー関数upup（）{///初めて$（ "＃gesturepwd"）。繰り返します！ "）; getur（）; $（" ＃gesturepwd "）ここでは、ユーザーが初めてパス要素に割り当てるパスワードを設定します。
次に、再帰方法を呼び出します
/// recursive（ループ自体）関数再帰（）{$（ "＃gesturepsa"）。 {$ .ajax（{type： "post"、url： "../../../home/grtturePassword"、datatype： 'json'、anyc：false、data：{gesturepassword：passwd、username}、success：cusce {alert（data）; $（ "＃gesturepsa"）再入力！ "）; $（"＃gesturepsa "）。remaid（）; $（" ＃gesturepwd "）。2回目のパスワードセットを初めて比較します。同じことが当てはまる場合は、Ajaxを介してパスワードを背景に渡し、パスワードを保存します。入力が2回異なる場合、合格するまで再帰的に自分自身を比較します。もちろん、異なるリセットを3回設定することもできます。
関数は非常に単純なので、詳細に説明しません。わからない、またはソースコードを参照したい場合は、メッセージを残してください。私はあなたと共有するためにドームを書きます。