ฉันยังไม่ได้ทำโครงการใด ๆ เมื่อเร็ว ๆ นี้ ฉันไม่มีเวลาเขียนตัวอย่างเล็ก ๆ ฉันมาที่นี่เพื่อแบ่งปันกับแพลตฟอร์ม Wulin Network สำหรับการอ้างอิงของคุณ ฉันจะยกโทษให้ฉันถ้าฉันเขียนบทความนี้ไม่ดี!
ฟังก์ชั่นและตรรกะวิธีการมีความคิดเห็นในรหัส ดังนั้นโปรดอ่านรหัสโดยตรง
ผลกระทบมีดังนี้:
โดยไม่ต้องกังวลใจเพิ่มเติมเพียงอัปโหลดรหัส:
JS Part:
ก่อนอื่นเราวาดกริดเก้าจานสองอันหนึ่งอันสำหรับการเข้าสู่ระบบและการตั้งค่ารหัสผ่านแบบเลื่อนครั้งแรกและอื่น ๆ สำหรับการตั้งค่ารหัสผ่านเลื่อนอีกครั้งซึ่งใช้เพื่อเปรียบเทียบกับรหัสผ่านเลื่อนที่ป้อนเป็นครั้งแรกเพื่อตรวจสอบว่ารหัสผ่านมีความสอดคล้องระหว่างสองครั้งหรือไม่
เก้าลูกค้าแรก
$ ("#gesturepwd"). gesturepasswd ({backgroundColor: "#252736", // สีพื้นหลัง: "#FFFFFF", // Main Control Color Roundradii: 25, // รัศมีของ Dot Pointradii: 6, // // ความสูงความกว้างของส่วนประกอบทั้งหมดคือ 240, // ความสูงของ linecolor ส่วนประกอบทั้งหมด: "#00AEC7", // สีของเส้น zindex ของผู้ใช้: 100 // แอตทริบิวต์ CSS Z-index ของส่วนประกอบทั้งหมด});วาดกริดเก้ากรงที่สองในลักษณะเดียวกัน
/// โหลดฟังก์ชั่นที่สอง getur () {$ ("#gesturepsa"). gesturepasswd ({backgroundColor: "#252736", // สีพื้นหลัง: "#ffffff", // main control color: 25, // รัศมี ช่องว่างระหว่างความกว้างจุดที่มีขนาดใหญ่: 240, // ความกว้างของความสูงส่วนประกอบทั้งหมด: 240, // ความสูงของส่วนประกอบทั้งหมด: "#00Aec7", // สีของเส้น zindex ของผู้ใช้: 100 // แอตทริบิวต์ CSS z-index ของส่วนประกอบทั้งหมด};};};};ส่วน HTML:
<div> <center> <br> <br> <div id = "gesturepwd"> </div> <div id = "gesturepsa" style = "จอแสดงผล: ไม่มี"> </div> </center> </div>
เมื่อผู้ใช้เข้าสู่ระบบฐานข้อมูลจะถูกสอบถามผ่านเลเยอร์ลอจิกธุรกิจเพื่อดูว่าลูกค้าตั้งรหัสผ่านเก้ากริดหรือไม่ หากมีการตั้งค่าเมธอด add () จะถูกเรียกและหากไม่ได้ตั้งค่าวิธีการ UPUP () จะเรียกว่า
<script> $ (function () {var urlinfo = window.location.href; var username = urlinfo.split ("_") [1]; $ .ajax ({ประเภท: "โพสต์", url: "../../home/details" (data.msg == "true") {$ ("#pass"). text (data.pass); แจ้งเตือน ("โปรดป้อนรหัสผ่านท่าทาง!") เพิ่ม ();} else {แจ้งเตือน ("โปรดตั้งรหัสผ่านท่าทาง!") upup ();}}})เมื่อผู้ใช้กำหนดไว้เราจะทำการดำเนินการต่อไปนี้ (เรียกวิธีการเพิ่ม ()):
/// ผู้ใช้ที่ตั้งค่าฟังก์ชั่นรหัสผ่านท่าทางเพิ่ม () {$ ("#gesturepwd"). on ("haspasswd", ฟังก์ชั่น (e, passwd) {var result; ถ้า (passwd == $ ("#pass"). text ()) {result = true; {$ ("#gesturepwd") ทริกเกอร์ ("passwdright"); settimeout (function () {// การดำเนินการอื่น ๆ หลังจากการตรวจสอบรหัสผ่านถูกต้องเปิดหน้าใหม่ ฯลฯ // การแจ้งเตือน ("รหัสผ่านถูกต้อง!") $ ("#gesturepwd") Effect} else {$ ("#gesturepwd"). ทริกเกอร์ ("passwdwrong"); // การดำเนินการอื่น ๆ หลังจากการตรวจสอบรหัสผ่านเป็นข้อผิดพลาดที่นี่เราสามารถรับรหัสผ่านของลูกค้าเลื่อนในกริดเก้ากริดนำออกมา (เช่น passwd) และเราเปรียบเทียบกับรหัสผ่านในการส่งองค์ประกอบที่ซ่อนอยู่ หากสิ่งนี้ไปถึงขั้นตอนต่อไปการเข้าสู่ระบบจะประสบความสำเร็จ เพราะฉันใส่รหัสผ่านทั้งหมดลงบนหน้าโดยตรงในองค์ประกอบของหน้า ไม่แนะนำในการพัฒนาจริง เป็นการดีที่สุดที่จะเปรียบเทียบในพื้นหลัง หากคุณต้องการสิ่งนี้โปรดเข้ารหัสแล้วใช้งาน หากผู้ใช้ตั้งค่าเป็นครั้งแรกเราเรียกวิธีการ UPUP
/// รหัสผ่านท่าทางยังไม่ได้ตั้งค่าฟังก์ชันผู้ใช้ upup () {/// การตั้งค่าครั้งแรก $ ("#gesturepwd") บน ("haspasswd", ฟังก์ชั่น (e, passwd) {$ ("#pass") อีกครั้ง! "); getur (); $ ("#gesturepwd "). ซ่อน (); $ ("#gesturepsa "). show ();}); /// การตั้งค่าครั้งที่สองซ้ำ ();};ที่นี่เราได้รับรหัสผ่านที่ผู้ใช้ตั้งค่าเป็นครั้งแรกเพื่อกำหนดให้กับองค์ประกอบ Pass
จากนั้นเรียกใช้วิธีการเรียกซ้ำ
/// Recursive (วนลูปตัวเอง) ฟังก์ชั่น Recursive () {$ ("#gesturepsa") บน ("haspasswd", ฟังก์ชั่น (e, passwd) {var urlinfo = window.location.href; ชื่อผู้ใช้ = urlinfo.split ("_") [1]; {$ .ajax ({type: "post", url: "../../home/grtturepassword",Datatype: 'json', anyc: false, ข้อมูล: {gesturepassword: passwd, ชื่อผู้ใช้: ชื่อผู้ใช้}, ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {Alert (data); $ ("#gesturepsa"). hide () ;; $ ("#indexs"). show () ;;}})} else {$ ("#gesturepsa") trigger ("passwdwrong"); Alert ("สองรหัสผ่านไม่สอดคล้องกัน กลับเข้ามาอีกครั้ง! "); $ ("#gesturepsa "). ลบ (); $ ("#gesturepwd "). หลังจาก (" <div id = 'gesturepsa'> </div> ") getur (); recursive ();}});}เราเปรียบเทียบชุดรหัสผ่านเป็นครั้งที่สองกับครั้งแรก หากเช่นเดียวกันเราจะส่งรหัสผ่านไปยังพื้นหลังผ่าน AJAX และบันทึกรหัสผ่าน หากอินพุตแตกต่างกันไปสองครั้งเราจะเปรียบเทียบตัวเองโดยการทำซ้ำจนกว่าเราจะผ่าน แน่นอนคุณสามารถตั้งค่าการรีเซ็ตที่แตกต่างกัน 3 ครั้ง
เนื่องจากฟังก์ชั่นนั้นง่ายมากฉันจะไม่อธิบายอย่างละเอียด หากคุณไม่เข้าใจหรือต้องการอ้างถึงซอร์สโค้ดโปรดฝากข้อความไว้ ฉันจะเขียนโดมเพื่อแบ่งปันกับคุณ