js實(shí)現(xiàn)驗(yàn)證碼功能
本文實(shí)例為大家分享了js實(shí)現(xiàn)驗(yàn)證碼功能的具體代碼，供大家參考，具體內(nèi)容如下
#前面是拆解著講的，不想看可以直接跳過，帶注釋的完整版代碼和效果在后面
首先在頁面中準(zhǔn)備一個(gè)輸入框，一個(gè)顯示驗(yàn)證碼的盒子和一個(gè)提交按鈕
<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;}
然后大概長這樣（有點(diǎn)丑，不過無所謂，主要內(nèi)容是js）
好，那么開始寫js
首先獲取這些元素
var input = document.querySelector(’input’);var btn = document.querySelector(’button’);var div = document.querySelector(’div’);
然后搞一個(gè)字符庫和一個(gè)保存驗(yàn)證碼的字符串
var characters = 'QWETYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890';var str;
那個(gè)字符庫就直接滾鍵盤就行了~
因?yàn)轵?yàn)證碼要多次用到隨機(jī)數(shù)，所以為了方便就先搞一個(gè)隨機(jī)數(shù)的函數(shù)
function getRandom(l, r) { return parseInt(l + Math.random() * (r - l + 1));}
因?yàn)槭球?yàn)證碼，所以不能讓生成的文本可以直接被選中復(fù)制，所以給加一個(gè)文本不可選中
div.addEventListener(’selectstart’, function (e) { e.preventDefault();})
因?yàn)轵?yàn)證碼不是每次刷新頁面就生成一次，看不清是可以換的，要多次生成，所以就把生成驗(yàn)證碼的部分寫在一個(gè)函數(shù)里
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); }}
大概說明一下這部分，原理大概就是創(chuàng)建4（我搞的是4位的驗(yàn)證碼）個(gè)span，然后分別隨機(jī)設(shè)置文本、字體大小、字體顏色、平移旋轉(zhuǎn)啥的，然后把span添加到div里成為div的子節(jié)點(diǎn)，然后不要忘了讓str變量儲(chǔ)存一下驗(yàn)證碼的字符
每次生成之前先將上一次生成的驗(yàn)證碼刪掉（即把div里的所有子節(jié)點(diǎn)刪除掉），并且把str重置
然后頁面刷新的時(shí)候生成一次（調(diào)用一次），每次點(diǎn)擊div的時(shí)候重新生成一次（每次點(diǎn)擊調(diào)用一次）
run();div.addEventListener(’click’, run);
再給提交按鈕添加點(diǎn)擊事件：判斷驗(yàn)證輸入的驗(yàn)證碼對不對，然后刷新驗(yàn)證碼，并且自動(dòng)將輸入框中的文本清除
btn.addEventListener(’click’, function () { if (input.value.toLowerCase() == str.toLowerCase()) { alert(’驗(yàn)證成功’); } else { alert(’驗(yàn)證失敗’); } run(); input.value = ’’;})
判斷驗(yàn)證碼這里我為了不區(qū)分大小寫用了toLowerCase()函數(shù)將兩個(gè)字符串都轉(zhuǎn)化成小寫之后再做的比較
至此，功能就都實(shí)現(xiàn)的差不多了
看效果：
帶注釋的完整版代碼如下：
<!DOCTYPE html><html lang='ch-ZN'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>js實(shí)現(xiàn)驗(yàn)證碼</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’); // 搞一個(gè)字符庫 var characters = 'QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890'; var str; // str用來儲(chǔ)存驗(yàn)證碼的文本 // 生成一個(gè)在[l,r]范圍內(nèi)的隨機(jī)整數(shù)的函數(shù) function getRandom(l, r) { return parseInt(l + Math.random() * (r - l + 1)); } // 設(shè)置文本不可選中 div.addEventListener(’selectstart’, function (e) { e.preventDefault(); }) // 生成驗(yàn)證碼的函數(shù) function run() { // 先重置str str = ’’; // 刪除掉div中的所有子節(jié)點(diǎn) while (div.hasChildNodes()) { div.removeChild(div.firstChild); } // 生成由四個(gè)字符組成的驗(yàn)證碼 for (var i = 0; i < 4; i++) { // 創(chuàng)建一個(gè)span對象 var span = document.createElement(’span’); // 設(shè)置文本（從字庫中隨機(jī)抽取一個(gè)字符） span.innerHTML = characters[getRandom(0, characters.length - 1)]; // 設(shè)置一些隨機(jī)的樣式 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(); // 每次打開/刷新頁面時(shí)先調(diào)用一次 div.addEventListener(’click’, run); // 每次點(diǎn)擊驗(yàn)證碼的時(shí)候調(diào)用一次 // 提交按鈕點(diǎn)擊事件 btn.addEventListener(’click’, function () { if (input.value.toLowerCase() == str.toLowerCase()) { alert(’驗(yàn)證成功’); } else { alert(’驗(yàn)證失敗’); } run(); input.value = ’’; }) </script></body></html>
以上
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP常用日期格式化函數(shù) FormatDate()2. Python 操作 MySQL數(shù)據(jù)庫3. Python數(shù)據(jù)相關(guān)系數(shù)矩陣和熱力圖輕松實(shí)現(xiàn)教程4. 開發(fā)效率翻倍的Web API使用技巧5. bootstrap select2 動(dòng)態(tài)從后臺(tái)Ajax動(dòng)態(tài)獲取數(shù)據(jù)的代碼6. CSS3中Transition屬性詳解以及示例分享7. js select支持手動(dòng)輸入功能實(shí)現(xiàn)代碼8. 什么是Python變量作用域9. vue使用moment如何將時(shí)間戳轉(zhuǎn)為標(biāo)準(zhǔn)日期時(shí)間格式10. python 如何在 Matplotlib 中繪制垂直線
網(wǎng)公網(wǎng)安備