js實現(xiàn)驗證碼功能
更新時間：2020年07月24日 17:27:58 作者：60rzvvbj
這篇文章主要為大家詳細介紹了js實現(xiàn)驗證碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)驗證碼功能的具體代碼，供大家參考，具體內容如下
#前面是拆解著講的，不想看可以直接跳過，帶注釋的完整版代碼和效果在后面
首先在頁面中準備一個輸入框，一個顯示驗證碼的盒子和一個提交按鈕
<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;
那個字符庫就直接滾鍵盤就行了~
因為驗證碼要多次用到隨機數(shù)，所以為了方便就先搞一個隨機數(shù)的函數(shù)
function getRandom(l, r) {
return parseInt(l + Math.random() * (r - l + 1));
}
因為是驗證碼，所以不能讓生成的文本可以直接被選中復制，所以給加一個文本不可選中
div.addEventListener('selectstart', function (e) {
e.preventDefault();
})
因為驗證碼不是每次刷新頁面就生成一次，看不清是可以換的，要多次生成，所以就把生成驗證碼的部分寫在一個函數(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位的驗證碼）個span，然后分別隨機設置文本、字體大小、字體顏色、平移旋轉啥的，然后把span添加到div里成為div的子節(jié)點，然后不要忘了讓str變量儲存一下驗證碼的字符
每次生成之前先將上一次生成的驗證碼刪掉（即把div里的所有子節(jié)點刪除掉），并且把str重置
然后頁面刷新的時候生成一次（調用一次），每次點擊div的時候重新生成一次（每次點擊調用一次）
run();
div.addEventListener('click', run);
再給提交按鈕添加點擊事件：判斷驗證輸入的驗證碼對不對，然后刷新驗證碼，并且自動將輸入框中的文本清除
btn.addEventListener('click', function () {
if (input.value.toLowerCase() == str.toLowerCase()) {
alert('驗證成功');
} else {
alert('驗證失敗');
}
run();
input.value = '';
})
判斷驗證碼這里我為了不區(qū)分大小寫用了toLowerCase()函數(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實現(xià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');
// 搞一個字符庫
var characters = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
var str; // str用來儲存驗證碼的文本
// 生成一個在[l,r]范圍內的隨機整數(shù)的函數(shù)
function getRandom(l, r) {
return parseInt(l + Math.random() * (r - l + 1));
}
// 設置文本不可選中
div.addEventListener('selectstart', function (e) {
e.preventDefault();
})
// 生成驗證碼的函數(shù)
function run() {
// 先重置str
str = '';
// 刪除掉div中的所有子節(jié)點
while (div.hasChildNodes()) {
div.removeChild(div.firstChild);
}
// 生成由四個字符組成的驗證碼
for (var i = 0; i < 4; i++) {
// 創(chuàng)建一個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>
以上
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
通過循環(huán)優(yōu)化 JavaScript 程序
這篇文章主要介紹了通過循環(huán)優(yōu)化 JavaScript 程序，對于提高 JavaScript 程序的性能這個問題，最簡單同時也是很容易被忽視的方法就是學習如何正確編寫高性能循環(huán)語句。下面我們來學習一下吧2019-06-06
vue?element?loading遮罩層添加按鈕功能實現(xiàn)
這篇文章主要介紹了vue?element?loading遮罩層添加按鈕功能實現(xiàn),通過實例代碼補充介紹了vue+elementui的this.$loading遮罩使用方法,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了JavaScript動態(tài)加載重復綁定問題,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
下面小編就為大家?guī)硪黄狫S獲取IMG圖片高寬的簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
javascript如何讀寫本地sqlite數(shù)據(jù)庫
這篇文章主要介紹了javascript如何讀寫本地sqlite數(shù)據(jù)庫問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
解析JSON字符串報錯syntaxError:unexpected?end?of?JsoN?input如何解決
這篇文章主要給大家介紹了關于解析JSON字符串報錯syntaxError:unexpected?end?of?JsoN?input如何解決的相關資料,文中通過代碼將解決的辦法介紹的非常詳細,需要的朋友可以參考下2024-05-05
ele-table表格列表內雙擊編輯部分信息的示例代碼(el-table組件同理)
本文介紹如何在ele-table組件中實現(xiàn)雙擊編輯功能,通過雙擊表格列表內需要編輯的區(qū)域,可以展示輸入框或日期選擇器進行數(shù)據(jù)修改,修改完成后,通過按回車鍵或點擊確認按鈕提交修改數(shù)據(jù),感興趣的朋友一起看看吧2024-11-11
JavaScript數(shù)據(jù)類型轉換實例(其他類型轉字符串、數(shù)值型、布爾類型)
這篇文章主要給大家介紹了關于JavaScript數(shù)據(jù)類型轉換的相關資料,本文分別介紹了其他類型轉為字符串、其他類型轉為數(shù)值型以及其他類型轉為布爾類型的方法,需要的朋友可以參考下2021-07-07
jquery+css3實現(xiàn)網頁背景花瓣隨機飄落特效
在qq空間可以自定義一些插件，裝飾空間，大家通常就是復制代碼到空間粘貼，會實現(xiàn)非常美觀的效果，有的會隨機飄落一些花瓣，那么這種效果用代碼怎么實現(xiàn)的呢，下面小編給大家詳解jquery實現(xiàn)網頁背景花瓣隨機飄落特效，需要的朋友可以參考下2015-08-08
這篇文章主要介紹了微信小程序實現(xiàn)搜索關鍵詞高亮的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03