لم أقم بأي مشروع مؤخرًا. ليس لدي وقت لكتابة عرض تجريبي صغير. أنا هنا لمشاركتها مع منصة شبكة Wulin للرجوع إليها. سأسامحني إذا لم أكتب هذا المقال جيدًا!
يتم التعليق على الوظائف ومنطق الطريقة في الكود. لذا يرجى قراءة الرمز مباشرة.
الآثار هي كما يلي:
بدون مزيد من اللغط ، فقط قم بتحميل الكود:
جزء JS:
أولاً ، نرسم شبكتين تسع شبكات ، واحدة لتسجيل الدخول والإعداد الأول لكلمة المرور المنزلق ، والآخر لإعداد كلمة المرور المنزلق مرة أخرى ، والتي تستخدم للمقارنة مع كلمة المرور المنزلق التي تم إدخالها لأول مرة لتحديد ما إذا كانت كلمات المرور متسقة بين المرتين.
أول تسعة عميل
$ ("#gesturepwd"). gesturepasswd ({backgroundcolor: "#252736" ، // لون الخلفية: "#ffffff" ، // control color main Roundradii: 25 ، // the the charius of the barge pointradii: 6 ، // divius of the hend end in the the the the the the the the the the the the the chare dot carge care clas. .رسم الشبكة الثانية من تسع قفص بنفس الطريقة
/// تحميل الوظيفة الثانية getur () {$ ("#gesturepsa"). Gesturepasswd ({backgroundcolor: "#252736" ، // خلفية اللون: "#fffffff" ، // contract contrade main contradii: 25 ، // the the divius spot arge: 6 ، الفجوة بين عرض النقطة الكبير: 240 ، // عرض ارتفاع المكون: 240 ، // ارتفاع المكون بالكامل linecolor: "#00aec7" ، // لون خط المستخدم zindex: 100 // سمة css z-index للمكون بأكمله}) ؛}) ؛}) ؛جزء HTML:
<viv> <center> <br> <br> <div id = "gesturepwd"> </viv> <div id = "gesturepsa" style = "display: none"> </viv> </center> </viv>
عند تسجيل الدخول إلى المستخدم ، يتم الاستعلام عن قاعدة البيانات من خلال طبقة منطق العمل لمعرفة ما إذا كان العميل يحدد كلمة مرور الشبكة التسع. إذا تم تعيينه ، يتم استدعاء طريقة ADD () ، وإذا لم يتم تعيينها ، فسيتم استدعاء طريقة UPUP ().
<script> $ (function () {var urlinfo = window.location.href ؛ var username = urlinfo.split ("_") [1] ؛ $ .ajax ({type: "post" ، upl: ".. username (username (username). {if (data.msg == "true") {$ ("#pass"). text (data.pass) ؛ Alert ("الرجاء إدخال كلمة مرور الإيماءات!") إضافة () ؛} آخر {Alert ("الرجاء تعيين كلمة مرور الإيماءات!)عند قيام المستخدم بتعيينه ، نقوم بإجراء العمليات التالية (استدعاء طريقة الإضافة ()):
/// المستخدمين الذين قاموا بتعيين وظيفة كلمة مرور الإيماءات إضافة () {$ ("#gesturepwd"). على ("haspasswd" ، الدالة (e ، passwd) {var result ؛ if (passwd == $ ("#pass"). text ()) {result = true ؛ {$ ("#gesturepwd"). الزناد ("passwdright") ؛ التأثير} {$ ("#gesturepwd").هنا يمكننا الحصول على كلمة مرور العميل ينزلق في شبكة الشبكة التسع ، وأخرجها (أي passwd) ، ونقارنها بكلمة المرور في ممر العنصر المخفي. إذا ذهب هذا إلى الخطوة التالية ، فإن تسجيل الدخول ناجح. لأنني وضعت جميع كلمات المرور على الصفحة مباشرة في عنصر الصفحة. هذا لا ينصح به في التطوير الفعلي. من الأفضل المقارنة في الخلفية. إذا كنت تريد هذا ، يرجى تشفيره ثم تشغيله. إذا قام المستخدم بتعيينه للمرة الأولى ، فإننا نسمي طريقة UPUP
/// لم يتم تعيين كلمة مرور الإيماءات على تشغيل وظيفة المستخدم UP () {/// أول مرة قم بإعداد $ ("#gesturepwd"). مرة أخرى!هنا نحصل على كلمة المرور التي يعينها المستخدم لأول مرة لتعيينها إلى عنصر المرور.
ثم اتصل بالطريقة العودية
/// العودية (الحلقات نفسها) الوظيفة العودية () {$ ("#gesturepsa"). على ("haspasswd" ، الدالة (e ، passwd) {var urlinfo = window.location.href ؛ var username = urlinfo.split ("_") [1] {$ .ajax ({type: "post" ، url: "../../home/grtturepassword"،datatype: 'json' ، anyc: false ، data: {gesturepassword: passwd ، username: username} ، النجاح: الوظيفة (البيانات) {Alert (data) ؛ $ ("#gesturepsa"). Hide () ؛؛ $ ("#indexs"). show () ؛؛}})} آخر {$ ("#gesturepsa"). trigger ( إعادة الدخول! ") ؛ $ ("#gesturepsa "). إزالة () ؛ $ ("#gesturepwd "). بعد (" <div id = 'gesturepsa'> </viv>)نقوم بمقارنة كلمة المرور المحددة للمرة الثانية مع المرة الأولى. إذا كان الشيء نفسه صحيحًا ، فسوف ننقل كلمة المرور إلى الخلفية من خلال Ajax وحفظ كلمة المرور. إذا كانت المدخلات مختلفة عن المرتين ، فسنقارن أنفسنا بشكل متكرر حتى نمر. بالطبع ، يمكنك أيضًا تعيين إعادة ضبط مختلفة 3 مرات.
نظرًا لأن الوظيفة بسيطة للغاية ، فلن أشرحها بالتفصيل. إذا كنت لا تفهم أو ترغب في الرجوع إلى رمز المصدر ، فيرجى ترك رسالة. سأكتب قبة لمشاركتها معك.