js實現驗證碼功能
本文實例為大家分享了js實現驗證碼功能的具體代碼，供大家參考，具體內容如下
#前面是拆解著講的，不想看可以直接跳過，帶注釋的完整版代碼和效果在后面
首先在頁面中準備一個輸入框，一個顯示驗證碼的盒子和一個提交按鈕
<body> <input type='text'> <div></div> <button>提交</button></body>
然后加一些樣式
input { width: 150px; height: 30px; outline: none; font-size: 24px; vertical-align: middle;}button { outline: none; vertical-align: middle; cursor: pointer;}div { display: inline-block; width: 90px; height: 40px; line-height: 40px; text-align: center; vertical-align: middle; background-color: #ddd; cursor: pointer;}
然后大概長這樣（有點丑，不過無所謂，主要內容是js）
好，那么開始寫js
首先獲取這些元素
var input = document.querySelector(’input’);var btn = document.querySelector(’button’);var div = document.querySelector(’div’);
然后搞一個字符庫和一個保存驗證碼的字符串
var characters = 'QWETYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890';var str;
那個字符庫就直接滾鍵盤就行了~
因為驗證碼要多次用到隨機數，所以為了方便就先搞一個隨機數的函數
function getRandom(l, r) { return parseInt(l + Math.random() * (r - l + 1));}
因為是驗證碼，所以不能讓生成的文本可以直接被選中復制，所以給加一個文本不可選中
div.addEventListener(’selectstart’, function (e) { e.preventDefault();})
因為驗證碼不是每次刷新頁面就生成一次，看不清是可以換的，要多次生成，所以就把生成驗證碼的部分寫在一個函數里
function run() { str = ’’; while (div.hasChildNodes()) { div.removeChild(div.firstChild); } for (var i = 0; i < 4; i++) { var span = document.createElement(’span’); span.innerHTML = characters[getRandom(0, characters.length - 1)]; span.style.display = ’inline-block’; span.style.fontSize = getRandom(16, 32) + ’px’; span.style.color = ’rgb(’ + getRandom(0, 200) + ’,’ + getRandom(0, 200) + ’,’ + getRandom(0, 200) + ’)’; span.style.transform = ’translate(’ + getRandom(-5, 5) + ’px, ’ + getRandom(-5, 5) + ’px) rotate(’ + getRandom(-20, 20) + ’deg)’; str += span.innerHTML; div.appendChild(span); }}
大概說明一下這部分，原理大概就是創建4（我搞的是4位的驗證碼）個span，然后分別隨機設置文本、字體大小、字體顏色、平移旋轉啥的，然后把span添加到div里成為div的子節點，然后不要忘了讓str變量儲存一下驗證碼的字符
每次生成之前先將上一次生成的驗證碼刪掉（即把div里的所有子節點刪除掉），并且把str重置
然后頁面刷新的時候生成一次（調用一次），每次點擊div的時候重新生成一次（每次點擊調用一次）
run();div.addEventListener(’click’, run);
再給提交按鈕添加點擊事件：判斷驗證輸入的驗證碼對不對，然后刷新驗證碼，并且自動將輸入框中的文本清除
btn.addEventListener(’click’, function () { if (input.value.toLowerCase() == str.toLowerCase()) { alert(’驗證成功’); } else { alert(’驗證失敗’); } run(); input.value = ’’;})
判斷驗證碼這里我為了不區分大小寫用了toLowerCase()函數將兩個字符串都轉化成小寫之后再做的比較
至此，功能就都實現的差不多了
看效果：
帶注釋的完整版代碼如下：
<!DOCTYPE html><html lang='ch-ZN'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>js實現驗證碼</title> <style> input { width: 150px; height: 30px; outline: none; font-size: 24px; vertical-align: middle; } button { outline: none; vertical-align: middle; cursor: pointer; } div { display: inline-block; width: 90px; height: 40px; line-height: 40px; text-align: center; vertical-align: middle; background-color: #ddd; cursor: pointer; } </style></head><body> <input type='text'> <div></div> <button>提交</button> <script> // 獲取元素 var input = document.querySelector(’input’); var btn = document.querySelector(’button’); var div = document.querySelector(’div’); // 搞一個字符庫 var characters = 'QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890'; var str; // str用來儲存驗證碼的文本 // 生成一個在[l,r]范圍內的隨機整數的函數 function getRandom(l, r) { return parseInt(l + Math.random() * (r - l + 1)); } // 設置文本不可選中 div.addEventListener(’selectstart’, function (e) { e.preventDefault(); }) // 生成驗證碼的函數 function run() { // 先重置str str = ’’; // 刪除掉div中的所有子節點 while (div.hasChildNodes()) { div.removeChild(div.firstChild); } // 生成由四個字符組成的驗證碼 for (var i = 0; i < 4; i++) { // 創建一個span對象 var span = document.createElement(’span’); // 設置文本（從字庫中隨機抽取一個字符） span.innerHTML = characters[getRandom(0, characters.length - 1)]; // 設置一些隨機的樣式 span.style.display = ’inline-block’; span.style.fontSize = getRandom(16, 32) + ’px’; span.style.color = ’rgb(’ + getRandom(0, 200) + ’,’ + getRandom(0, 200) + ’,’ + getRandom(0, 200) + ’)’; span.style.transform = ’translate(’ + getRandom(-5, 5) + ’px, ’ + getRandom(-5, 5) + ’px) rotate(’ + getRandom(-20, 20) + ’deg)’; str += span.innerHTML; // str記錄字符 div.appendChild(span); // 將span添加到div中 } } run(); // 每次打開/刷新頁面時先調用一次 div.addEventListener(’click’, run); // 每次點擊驗證碼的時候調用一次 // 提交按鈕點擊事件 btn.addEventListener(’click’, function () { if (input.value.toLowerCase() == str.toLowerCase()) { alert(’驗證成功’); } else { alert(’驗證失敗’); } run(); input.value = ’’; }) </script></body></html>
以上
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備