เวอร์ชันพื้นฐาน
ตัดสินจากประสบการณ์ประจำวันของเราในการเข้าถึงออนไลน์รหัสการตรวจสอบโดยทั่วไปสี่หลักประกอบด้วยตัวเลขและตัวอักษร
จากนั้นโปสเตอร์จะทำให้ทุกคนใช้ JavaScript ทีละขั้นตอนเพื่อสร้างสคริปต์รหัสยืนยัน!
ก่อนอื่นให้ผลิตภัณฑ์สำเร็จรูปเพื่อให้ทุกคนสามารถเข้าใจ:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <style> #SecurityCode {พื้นหลังสี: #008000; ความกว้าง: 70px; ความสูง: 30px; Font-Family: 'Kaiti', serif; ขนาดตัวอักษร: 20px; สี: สีขาว; } </style> <script language = "javascript" type = "text/javascript"> function createCode () {var code = array ใหม่ (0,1,2,3,4,5,6,7,8,9 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'q', '', ', var codenumber; SecurityCode = ""; // ตัวแปรทั่วโลก, อำนวยความสะดวกในการตรวจสอบที่ตามมาสำหรับ (var i = 0; i <4; i ++) {codenumber = math.floor (math.random ()*36); SecurityCode+= รหัส [codenumber]; } document.getElementById ("SecurityCode"). value = SecurityCode; } ฟังก์ชั่นตรวจสอบ () {var entercode = document.getElementById ("entercode") ค่า; if (enterCode.touppercase () == ความปลอดภัย) {แจ้งเตือน ("อินพุตถูกต้องการตรวจสอบผ่าน!"); } else {entercode.value = ""; createCode (); }} </script> <title> jizhen tan </title> </head> <body onload = "checkcookie ()"> <อินพุต type = "text" id = "entercode"> <br/> <input type = "button" id = "SecurityCode" OnClick = "createCode () <อินพุต type = "ปุ่ม" style = "พื้นหลังสี: #0099ff; font-size: 20px;" value = "ตรวจสอบ" onClick = "ตรวจสอบ ()"> </body> </html>1. เนื่องจากเป็นรหัสการตรวจสอบสี่หลักจึงจำเป็นต้องเปิดความคิดของเรา ก่อนอื่นเราต้องมีอาร์เรย์เพื่อจัดเก็บตัวอักษรและตัวเลข
รหัส var = อาร์เรย์ใหม่ (0,1,2,3,4,5,6,7,8,9 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'q', '', ',
2. จากนั้นเราต้องปล่อยให้มันแบบสุ่มแสดงองค์ประกอบในอาร์เรย์ ที่นี่เราสร้างตัวแปร codenumber เพื่อแสดงตัวเลขแบบสุ่ม แต่สิ่งที่เราต้องการคือรหัสการตรวจสอบสี่บิตและตอนนี้องค์ประกอบในอาร์เรย์ทั้งหมดเป็นโสดเราควรทำอย่างไร เรียบง่าย! มาสร้างตัวแปร SecurityCode เพื่อจัดเก็บองค์ประกอบในอาร์เรย์ รหัสมีดังนี้:
var codenumber; SecurityCode = ""; // ตัวแปรทั่วโลก, อำนวยความสะดวกในการตรวจสอบที่ตามมาสำหรับ (var i = 0; i <4; i ++) {codenumber = math.floor (math.random ()*36); SecurityCode+= รหัส [codenumber]; -จะเห็นได้ว่าในเวลานี้ตัวแปร SecurityNumber เก็บรหัสการตรวจสอบแบบสุ่มสี่บิต
3. โอเคหลังจากสองขั้นตอนง่าย ๆ เราได้รับรหัสการตรวจสอบสี่หลัก เราใส่ไว้ในฟังก์ชัน createCode
ฟังก์ชั่น createCode () {var code = อาร์เรย์ใหม่ (0,1,2,3,4,5,6,7,8,9 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'q', '', ', var codenumber; SecurityCode = ""; // ตัวแปรทั่วโลก, อำนวยความสะดวกในการตรวจสอบที่ตามมาสำหรับ (var i = 0; i <4; i ++) {codenumber = math.floor (math.random ()*36); SecurityCode+= รหัส [codenumber]; } document.getElementById ("SecurityCode"). value = SecurityCode; -4. ต่อไปเราสร้างกลไกการตรวจสอบ:
ฟังก์ชั่นตรวจสอบ () {var entercode = document.getElementById ("enterCode") ค่า; if (enterCode.touppercase () == ความปลอดภัย) {แจ้งเตือน ("อินพุตถูกต้องการตรวจสอบผ่าน!"); } else {entercode.value = ""; createCode (); -5. ภายใต้การดัดแปลงขนาดเล็กรหัสการตรวจสอบ:
<style> #SecurityCode {พื้นหลังสี: #008000; ความกว้าง: 70px; ความสูง: 30px; Font-Family: 'Kaiti', serif; ขนาดตัวอักษร: 20px; สี: สีขาว; } </style>ขั้นสูง: เคล็ดลับขั้นสูงเพื่อหยุดหุ่นยนต์ต่อไป
ในโครงการส่วนใหญ่ที่ฉันเข้ามาติดต่อด้วยรหัสการตรวจสอบมักจะทำโดยแบ็กเอนด์ ในสองวันที่ผ่านมามีหน้าเว็บที่ต้องการรหัสการตรวจสอบ ฉันคิดถึงการใช้งานพื้นหลังทันที แต่ทันใดนั้นฉันคิดว่าโครงการส่วนใหญ่ไม่มีข้อกำหนดด้านความปลอดภัยสูงและต้องการทักษะบางอย่างในการบล็อกหุ่นยนต์ดังนั้นฉันจึงเขียนรหัสการตรวจสอบโดยใช้ส่วนหน้า และใช้การหมุนในคุณสมบัติการแปลงของ CSS3 เพื่อตั้งค่าการหมุนจากนั้นสุ่มจะได้รับสายสัญญาณรบกวนและในที่สุดเพื่อเพิ่มเลเยอร์ของความทึบ = 0 div ที่ด้านบนของโหนด DOM ทั้งหมดรหัสการตรวจสอบส่วนหน้าจะออกมา
รหัส VCode:
(function () {var randstr = function (ความยาว) {var key = {str: [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'O', 'P', 'Q', 'R', 'S', ' s ',' t ',' x ',' u ',' v ',' y ',' z ',' w ',' n ',' 0 ',' 1 ',' 2 ',' 3 ',' 4 ',' 5 ',' 6 ',' 7 ',' 8 ',' 9 ' ] Randint: N, M) {var c = m -n + 1; ฟังก์ชั่น (Len) {var _this = this; Math.random () * C + N; vcode.prototype.init = function () {this.dom.style.position = "ญาติ"; this.dom.clientwidth; "ตำแหน่ง: Absolute", "Cursor: Pointer", "z-index: 9999999"] .oin (";"); _this.dom.addeventListener ("คลิก", {_this.update.call (_this);}; "Green", "Red", "Blue", "#53DA33", "#AA0000", "#FFBB00"]; this.linecolors = ["#88888", "#FF7744", "#888800", " "Object") {สำหรับ (I ในตัวเลือก) {this.options [i] = ตัวเลือก [i];}}}}; i <this.linedoms.length; this.code === รหัส; vCode.prototype.drawCode = ฟังก์ชั่น (รหัส, ดัชนี) {var dom = document.createElement ("span"); this.options.colors.length - 1)], "ตำแหน่ง: สัมบูรณ์", "ซ้าย:" + randint (this.uw * ดัชนี, this.uw * ดัชนี + this.uw - 10) + "px", "top:" + randint (0, this.h - 30) + "px" Randint (-30, 30) + "Deg)", "-moz-transform: หมุน (" + randint (-30, 30) + "deg)", "-webkit-transform: หมุน (" + randint (-30, 30) + "deg)", "-o-transform:" this. i = 0; Randint (this.options.lineHeightmin, this.options.lineHeightmax) + "px", "พื้นหลัง:" + this.options.linecolors [Randint (0, this.options.linecolors.length - 1), "ซ้าย:" Randint (0, this.w - 20) + "px", " "แปลง: หมุน (" + randint (-30, 30) + "deg)", "-ms-transform: หมุน (" + randint (-30, 30) + "deg)", "-moz-transform: หมุน (" + randint (-30, 30) + "deg)" "-O-transform: rotate (" + randint (-30, 30) + "deg)", "font-family:" + this.options.fonts [randint (0, this.options.fonts.length-1) }};การใช้งาน:
// container เป็นโหนด DOM ของรหัสการตรวจสอบ VAR รหัส = ใหม่ vCode (คอนเทนเนอร์); // ตรวจสอบว่าถูกต้อง // inputCode เป็นรหัสการตรวจสอบที่ป้อนโดย user.Verify (inputCode); // ส่งคืนจริงหรือเท็จ