Основная версия
Судя по нашему ежедневному опыту в Интернете, код проверки, как правило, составляет четыре цифры, состоящие из чисел и писем.
Затем плакат заставит всех использовать JavaScript шаг за шагом, чтобы создать скрипт кода проверки!
Сначала дайте готовый продукт, чтобы каждый мог понять:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <style> #securityCode {фоновый цвет: #008000; Ширина: 70px; Высота: 30px; Фонт-семья: 'Kaiti', Serif; размер шрифта: 20px; Цвет: белый; } </style> <script language = "javascript" type = "text/javascript"> function 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', 'r', 's', 't', 'u', 'v' w ',' ',' y ',' y '' y ',' 'y', '' y ',' y ',' y ',' y ',' y ',' y ',' Z var CodeNumber; SecurityCode = ""; // Глобальные переменные, облегчайте последующую проверку для (var i = 0; i <4; i ++) {codeNumber = math.floor (math.random ()*36); SecurityCode+= Code [CodeNumber]; } document.getElementById ("SecurityCode"). value = SecurityCode; } function veserify () {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 = "securityCode" onclick = "createCode ()"> <a href = "##" "onclick". <input type = "button" style = "founal-color: #0099ff; font-size: 20px;" value = "verify" onclick = "verify ()"> </body> </html>1. Поскольку это четырехзначный код проверки, наша идея должна быть открыта. Во -первых, нам нужен массив для хранения букв и цифр.
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', 'r', 's', 't', 'u', 'v' w ',' ',' y ',' y '' y ',' 'y', '' y ',' y ',' y ',' y ',' y ',' y ',' Z
2. Затем мы должны позволить этому случайным образом отображать элементы в массиве. Здесь мы создаем переменную CodeNumber для случайного отображения чисел, но нам нужно четырехбитовый код проверки, и теперь элементы в массиве все одиноки, что мы должны делать? Простой! Давайте создадим переменную кода безопасности для хранения элементов в массиве. Код заключается в следующем:
var CodeNumber; SecurityCode = ""; // Глобальные переменные, облегчайте последующую проверку для (var i = 0; i <4; i ++) {codeNumber = math.floor (math.random ()*36); SecurityCode+= Code [CodeNumber]; }Можно видеть, что в настоящее время переменная SecurityNumber хранит четырехбитный код случайной проверки.
3. Хорошо, после двух простых шагов мы получили четырехзначный код проверки. Мы поместили это в функцию CreateCode.
function 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', 'r', 's', 't', 'u', 'v' w ',' ',' y ',' y '' y ',' 'y', '' y ',' y ',' y ',' y ',' y ',' y ',' Z var CodeNumber; SecurityCode = ""; // Глобальные переменные, облегчайте последующую проверку для (var i = 0; i <4; i ++) {codeNumber = math.floor (math.random ()*36); SecurityCode+= Code [CodeNumber]; } document.getElementById ("SecurityCode"). value = SecurityCode; }4. Далее мы создаем механизм проверки:
function vesurify () {var entercode = document.getElementById ("entercode"). value; if (entercode.touppercase () == SecurityCode) {alert («Ввод верен, пройти проверку!»); } else {entercode.value = ""; createCode (); }}5. При небольшой модификации код проверки:
<style> #securityCode {founal-color: #008000; Ширина: 70px; Высота: 30px; Фонт-семья: 'Kaiti', Serif; размер шрифта: 20px; Цвет: белый; } </style>Advanced: продвинутые советы по дальнейшей остановке роботов
В большинстве проектов, с которыми я вступил в контакт, коды проверки всегда делались бэкэнд. За последние два дня оказалась страница, которая нуждалась в кодах проверки. Я сразу подумал о фоновой реализации, но вдруг я подумал, что в большинстве проектов не было высоких требований безопасности и потребовало некоторых навыков для блокировки роботов, поэтому я написал код проверки, используя фронт. И используйте вращение в свойстве преобразования 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 ',' 8 ',' 9 ' ], randint: n, m) {var c = m -n + 1; function(len){ var _this = this; var l = len || 10; var str = ''; for(var i = 0 ; i<l ; i++){ str += _this.randStr(); } return str; } }; length = length ? length : 10; return key.create(length); }; var randint = function(n,m){ var c = m-n+1; var num = Math.random() * c + n; return Math.floor(num); }; var vCode = function(dom, options){ this.codeDoms = []; this.lineDoms = []; this.initOptions(options); this.dom = dom; this.init(); this.addEvent(); this.update(); this.mask(); }; vCode.prototype.init = function () {hop.style.position = "относительно"; this.dom.clientHeight; "Z-Index: 999999"]. _this.update.call (_this); #AA0000 »,"#ffbb00 "]; "FF7744", "#888800", "#008888"]; параметры [i]; это. vcode.prototype.draw = function () {this.codems = []; document.createElement ("span"); randint (this.uw * index, this.uw * index + this.uw-10) + «px», «top:» + randint (0, this.h-30) + «px», «Преобразование: вращение (« + randint (-30, 30) + «deg)», «-ms-transform: rowate (« + randint (-30, 30) + «deg)», «-с-трансформы: rowate (« + randint (-30, 30) «deg)», «Гроньи» (« + randint (-30, 30)». Randint (-30, 30) + «deg)», «-webkit-transform: rotate (« + randint (-30, 30) + «deg)», «-o-transform: rotate (« + randint (-30, 30) + «deg)», «Font-family:« + options.fonts [randint (0, это. randint (400, 900) .join (";"); dom.style.csstext = [«Положение: абсолют», «непрозрачность:» + randint (3, 8) / 10, «ширина:» + randint (this.options.linewidthmin, this.options.linewidthmax) + «px», «высота:» + randint (this.options.lineheightmin, это. this.options.linecolors [randint (0, this.options.linecolors.length-1)], «слева:« + randint (0, this.w-20) + «px», «top:» + randint (0, this.h) + «px», «Преобразование: вращение» (« + randint (-30, 30) +« deg) »,«-»-rotte (« + randint (-30, 30) + «deg)»,-rotte (« + randint (-30, 30) +« deg) ». "DEG)", "-MOZ-Transform: rotate (" + Randint (-30, 30) + "deg)", "-вобкит-трансформация: votate (" + randint (-30, 30) + "deg)", -o-transform: rotate (" + randint (-30, 30) +" Deg) "," font-family: " + это. this.options.fonts.length - 1)], "font -weight:" + randint (400, 900)]. Join (";");Использование:
// контейнер является узлом DOM кода проверки VAR Code = New VCode (контейнер); // Убедитесь, является ли он правильным // input -код - это код проверки, введенный user.Verify (inputCode); // вернуть истинную или ложную