Versi Dasar
Menilai dari pengalaman sehari -hari kami dalam akses online, kode verifikasi umumnya empat digit, terdiri dari angka dan surat.
Kemudian poster akan membuat semua orang menggunakan JavaScript langkah demi langkah untuk membuat skrip kode verifikasi!
Pertama berikan produk jadi, sehingga semua orang dapat mengerti:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <tyle> #securitycode {latar belakang-color: #008000; Lebar: 70px; Tinggi: 30px; Font-Family: 'Kaiti', Serif; font-size: 20px; Warna: Putih; } </tyle> <bahasa skrip = "javascript" type = "text/javascript"> function createCode () {var code = array baru (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','X','Y','Z'); var codenumber; SecurityCode = ""; // variabel global, memfasilitasi verifikasi selanjutnya untuk (var i = 0; i <4; i ++) {codenumber = math.floor (math.random ()*36); SecurityCode+= kode [codenumber]; } document.getElementById ("SecurityCode"). Value = SecurityCode; } function verify () {var enterCode = document.geteLementById ("enterCode"). value; if (enterCode.touppercase () == SecurityCode) {waspada ("Input benar, lulus verifikasi!"); } 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="createCode()"> Can't see Jelas </a> <br/> <input type = "Tombol" style = "latar belakang-kolor: #0099ff; font-size: 20px;" value = "verifikasi" onclick = "verify ()"> </body> </html>1. Karena ini adalah kode verifikasi empat digit, ide kami perlu dibuka. Pertama, kita membutuhkan array untuk menyimpan surat dan angka.
Var Code = Array Baru (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','X','Y','Z');
2. Maka kita perlu membiarkannya secara acak menampilkan elemen dalam array. Di sini kami membuat variabel bilangan codene untuk menampilkan angka secara acak, tetapi yang kami butuhkan adalah kode verifikasi empat-bit, dan sekarang elemen dalam array semuanya lajang, apa yang harus kami lakukan? Sederhana! Mari kita buat variabel kode keamanan untuk menyimpan elemen di array. Kodenya adalah sebagai berikut:
var codenumber; SecurityCode = ""; // variabel global, memfasilitasi verifikasi selanjutnya untuk (var i = 0; i <4; i ++) {codenumber = math.floor (math.random ()*36); SecurityCode+= kode [codenumber]; }Dapat dilihat bahwa pada saat ini variabel SecurityNumber menyimpan kode verifikasi acak empat-bit.
3. Oke, setelah dua langkah sederhana, kami mendapatkan kode verifikasi empat digit. Kami memasukkannya ke dalam fungsi kode createC.
fungsi createCode () {var code = array baru (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','X','Y','Z'); var codenumber; SecurityCode = ""; // variabel global, memfasilitasi verifikasi selanjutnya untuk (var i = 0; i <4; i ++) {codenumber = math.floor (math.random ()*36); SecurityCode+= kode [codenumber]; } document.getElementById ("SecurityCode"). Value = SecurityCode; }4. Selanjutnya kita membuat mekanisme verifikasi:
function verify () {var enterCode = document.geteLementById ("enterCode"). value; if (enterCode.touppercase () == SecurityCode) {waspada ("Input sudah benar, lulus verifikasi!"); } else {enterCode.Value = ""; createCode (); }}5. Di bawah modifikasi kecil, kode verifikasi:
<tyle> #securitycode {latar belakang-warna: #008000; Lebar: 70px; Tinggi: 30px; Font-Family: 'Kaiti', Serif; font-size: 20px; Warna: Putih; } </style>Tingkat Lanjut: Tip Lanjutan Untuk Menghentikan Robot Lebih Lanjut
Dalam sebagian besar proyek saya bersentuhan, kode verifikasi selalu dilakukan oleh backend. Dalam dua hari terakhir, kebetulan ada halaman yang membutuhkan kode verifikasi. Saya segera memikirkan implementasi latar belakang, tetapi tiba -tiba saya berpikir bahwa sebagian besar proyek tidak memiliki persyaratan keamanan tinggi dan membutuhkan beberapa keterampilan untuk memblokir robot, jadi saya menulis kode verifikasi menggunakan ujung depan. Dan gunakan rotasi di properti transformasi CSS3 untuk mengatur rotasi, kemudian secara acak dapatkan beberapa garis interferensi, dan akhirnya, untuk menambahkan lapisan opacity = 0 div di atas semua node dom, kode verifikasi ujung depan akan keluar.
Kode 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 ' ] Fungsi (n, m) {var c = m -n + 1; Fungsi) {Var _THIS = ini; Math.random () C + N; vcode.prototype.init = function () {this.dom.style.position = "Relative" this.dom.clientwidth; "Absolute", "Kursor: Pointer", "Z-Index: 9999999"] .join (";"); function () {_pisir.update.call (_this); "AA0000",#FFBB00 "]; "FF7744",#888800 ",#008888"]; = opsi [i];}}}}; this.dom.removechild (this.linedoms [i]); vcode.prototype.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: rotate (" + randint (-30) + "deg)", "-MS-Transform: rotate (" + randint (-30, "") "" "-MSform: rotate (" + randint (-30) + "deg)", "-MSform: rotate (" + randint (-30) + "DEG)", "dEG), rotate: rotate (" + randint (-30) + "deg)", "dEG), ROTATE: ROTATE (" + Randint (-30, "") " Randint (-30, 30) + "deg)", "-webkit-transform: rotate (" + randint (-30, 30) + "deg)", "-o-transform: rotate (" + randint (-30, 30) + "deg)", "font-family:" + this.options.fonts [randint (0, this. Randint (400, 900)] .join (";"); dom.style.csStext = ["posisi: absolute", "opacity:" + randint (3, 8) / 10, "lebar:" + randint (this.options.linewidthmin, this.options.linewidthMax) + "px", "tinggi:" + randint (this.options.linerMix, thisplions. "Latar Belakang:" + this.options.linecolors [randint (0, this.options.linecolors.length-1)], "kiri:" + randint (0, this.w-20) + "px", "Top:" + randint (0, this.h) + "px", "Transform: rotate (" + randint (-30, 30, "Deg)" Deg), "" Deg), "Deg)," Deg), "ROTET (-30,-" ROT ",-" ROT ",-" Randint (-30, 30) + "deg)", "-Moz-Transform: rotate (" + randint (-30, 30) + "deg)", "-webkit-transform: rotate (" + randint (-30, 30) + "deg)", "-o-transform: rotate (" + randint (-30) + "Deg)", "-O-Transform: Rotate (" + Randint (-30) + "Deg)" " ini.penggunaan:
// Container adalah simpul DOM dari kode verifikasi VAR Code = vcode baru (wadah); // Verifikasi apakah itu benar // inputCode adalah kode verifikasi yang dimasukkan oleh user.verify (inputCode); // Kembalikan Benar atau Salah