الإصدار الأساسي
انطلاقًا من تجربتنا اليومية في الوصول عبر الإنترنت ، يكون رمز التحقق عمومًا أربعة أرقام ، يتكون من الأرقام والحروف.
ثم سيقود الملصق الجميع إلى استخدام JavaScript خطوة بخطوة لإنشاء برنامج نصي لرمز التحقق!
قم أولاً بإعطاء المنتج النهائي ، حتى يتمكن الجميع من فهمه:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <style> #securitycode {background-color: #008000 ؛ العرض: 70 بكسل ؛ الارتفاع: 30 بكسل ؛ Font-Family: 'Kaiti' ، serif ؛ حجم الخط: 20 بكسل ؛ اللون: أبيض. } </style> <script language = "javaScript" type = "text/javaScript"> function createCode () {var code = new 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 '،' r '،' t '،' u '،' v ، ' var codenumber ؛ SecurityCode = "" ؛ // المتغيرات العالمية ، تسهيل التحقق اللاحق لـ (var i = 0 ؛ i <4 ؛ i ++) {codeNumber = math.floor (Math.Random ()*36) ؛ SecurityCode+= Code [CodeNumber] ؛ } document.getElementById ("SecurityCode"). value = SecurityCode ؛ } الدالة Verify () {var entercode = document.getElementById ("entercode"). value ؛ if (entercode.touppercase () == securityCode) {Alert ("الإدخال صحيح ، التحقق من!") ؛ } else {entercode.value = "" ؛ CreateCode () ؛ }}} </script> <title> jizhen tan </title> </head> <body onload = "checkcookie ()"> <input type = "text" id = "entercode"> <br/> <input type = "button" id = "createCode" onClick = "CreateCode () <type type = "button" style = "background-color: #0099ff ؛ size-size: 20px ؛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 '،' r '،' t '،' u '،' v ، '
2. ثم نحتاج إلى السماح لها بعرض العناصر بشكل عشوائي في الصفيف. هنا نقوم بإنشاء متغير ترميز لعرض الأرقام بشكل عشوائي ، ولكن ما نحتاج إليه هو رمز التحقق من أربعة بت ، والآن العناصر الموجودة في الصفيف كلها عازبة ، ماذا يجب أن نفعل؟ بسيط! دعنا نقوم بإنشاء متغير رمز أمان لتخزين العناصر في الصفيف. الرمز كما يلي:
var codenumber ؛ SecurityCode = "" ؛ // المتغيرات العالمية ، تسهيل التحقق اللاحق لـ (var i = 0 ؛ i <4 ؛ i ++) {codeNumber = math.floor (Math.Random ()*36) ؛ SecurityCode+= Code [CodeNumber] ؛ }يمكن ملاحظة أنه في هذا الوقت يخزن متغير SecurityNumber رمز التحقق العشوائي بأربعة بت.
3. حسنًا ، بعد خطوتين بسيطتين ، حصلنا على رمز التحقق المكون من أربعة أرقام. نضعها في وظيفة CreateCode.
وظيفة CreateCode () {var code = new 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 '،' r '،' t '،' u '،' v ، ' var codenumber ؛ SecurityCode = "" ؛ // المتغيرات العالمية ، تسهيل التحقق اللاحق لـ (var i = 0 ؛ i <4 ؛ i ++) {codeNumber = math.floor (Math.Random ()*36) ؛ SecurityCode+= Code [CodeNumber] ؛ } document.getElementById ("SecurityCode"). value = SecurityCode ؛ }4. التالي ننشئ آلية التحقق:
وظيفة التحقق () {var entercode = document.getElementById ("entercode"). value ؛ if (entercode.touppercase () == SecurityCode) {Alert ("الإدخال صحيح ، التحقق من مرور!") ؛ } else {entercode.value = "" ؛ CreateCode () ؛ }}5. تحت تعديل صغير ، رمز التحقق:
<style> #securitycode {background-color: #008000 ؛ العرض: 70 بكسل ؛ الارتفاع: 30 بكسل ؛ Font-Family: 'Kaiti' ، serif ؛ حجم الخط: 20 بكسل ؛ اللون: أبيض. } </style>متقدم: نصائح متقدمة لوقف الروبوتات
في معظم المشاريع التي تلامسها ، تم دائمًا القيام برموز التحقق بواسطة الواجهة الخلفية. في اليومين الماضيين ، حدث أن تكون هناك صفحة تحتاج إلى رموز التحقق. لقد فكرت على الفور في تنفيذ الخلفية ، لكن فجأة اعتقدت أن معظم المشاريع لم يكن لديها متطلبات أمان عالية وتتطلب بعض المهارات لحظر الروبوتات ، لذلك كتبت رمز التحقق باستخدام الواجهة الأمامية. واستخدم الدوران في خاصية تحويل CSS3 لتعيين الدوران ، ثم الحصول على بعض خطوط التداخل عشوائيًا ، وأخيراً ، من أجل إضافة طبقة من العتامة = 0 DIV أعلى جميع عقد DOM ، سيتم الخروج من رمز التحقق الأمامي.
رمز VCode:
(function () {var randstr = function (length) {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 '،' ، '9' ، '9' ] ، الدالة (n ، m) {var c = m -n + وظيفة (var _ هذا ؛ Random () Vcode.Protype.init =) {this.dom.style this.dom.clientwidth ؛ مطلق "،" المؤشر: مؤشر "،" z-index: 9999999 "]. _ this.update. "#AA0000" ، "#ffbb00" ؛ "#ff744" ، "#88800" ، "#00888" الخيارات [i] ؛}}} ؛ this.dom. vcode.protype.draw = function () {this.codedoms = [] ؛ document.createElement ("span") ؛ Randint (this.uw * index ، this.uw * index + this.uw-10) + "px" ، "TOP:" + Randint (0 ، this.h-30) + "px" ، "transform: rotate (" + randint (-30 ، 30) + "deg)" ، "-ms-transform:" + randint (-30 ، 30) + ". RANDINT (-30 ، 30) + "DEG)" ، "-webkit-transform: Rotate (" + Randint (-30 ، 30) + "DEG)" ، "-O-Transform: Rotate (" + Randint (-30 ، 30) + "deg)" ، "font-family: Randint (400). Dom.Style.csStext = ["الموضع: مطلق" ، "عتامة:" + Randint (3 ، 8) / 10 ، "العرض:" + Randint (this.options.linewidthmin ، this.options.linewidthmax) + "px" ، "height: this.options.linecolors [Randint (0 ، this.options.linecolors.length-1)] ، "اليسار:" + randint (0 ، this.w-20) + "px" ، "TOP: "DEG)" ، "-moz-transform: rotate (" + Randint (-30 ، 30) + "deg)" ، "-webkit-transform: rotate (" + Randint (-30 ، 30) + "deg)" ، "-o-transform: Randate (" + Randint (-30 ، 30) + "deg)" ، " this.options.length - 1) ، "Font -Weight:" + 400).الاستخدام:
// Container هي عقدة DOM لرمز VAR Code VCODE (حاوية جديدة) ؛ // تحقق مما إذا كان صحيحًا // inputcode هو رمز التحقق الذي أدخله المستخدم. // إرجاع صحيح أو خطأ