js實現(xiàn)驗證碼功能

更新時間：2020年07月24日 17:27:58 作者：60rzvvbj

這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)驗證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)驗證碼功能的具體代碼，供大家參考，具體內(nèi)容如下

#前面是拆解著講的，不想看可以直接跳過，帶注釋的完整版代碼和效果在后面

首先在頁面中準(zhǔ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;
}

然后大概長這樣（有點丑，不過無所謂，主要內(nèi)容是js）

好，那么開始寫js

首先獲取這些元素

var input = document.querySelector('input');
var btn = document.querySelector('button');
var div = document.querySelector('div');

然后搞一個字符庫和一個保存驗證碼的字符串

var characters = "QWETYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
var str;

那個字符庫就直接滾鍵盤就行了~

因為驗證碼要多次用到隨機(jī)數(shù)，所以為了方便就先搞一個隨機(jī)數(shù)的函數(shù)

function getRandom(l, r) {
 return parseInt(l + Math.random() * (r - l + 1));
}

因為是驗證碼，所以不能讓生成的文本可以直接被選中復(fù)制，所以給加一個文本不可選中

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，然后分別隨機(jī)設(shè)置文本、字體大小、字體顏色、平移旋轉(zhuǎn)啥的，然后把span添加到div里成為div的子節(jié)點，然后不要忘了讓str變量儲存一下驗證碼的字符

每次生成之前先將上一次生成的驗證碼刪掉（即把div里的所有子節(jié)點刪除掉），并且把str重置

然后頁面刷新的時候生成一次（調(diào)用一次），每次點擊div的時候重新生成一次（每次點擊調(diào)用一次）

run();
div.addEventListener('click', run);

再給提交按鈕添加點擊事件：判斷驗證輸入的驗證碼對不對，然后刷新驗證碼，并且自動將輸入框中的文本清除

btn.addEventListener('click', function () {
 if (input.value.toLowerCase() == str.toLowerCase()) {
 alert('驗證成功');
 } else {
 alert('驗證失敗');
 }
 run();
 input.value = '';
})

判斷驗證碼這里我為了不區(qū)分大小寫用了toLowerCase()函數(shù)將兩個字符串都轉(zhuǎn)化成小寫之后再做的比較

至此，功能就都實現(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]范圍內(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();
 })

 // 生成驗證碼的函數(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');

  // 設(shè)置文本（從字庫中隨機(jī)抽取一個字符）
  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(); // 每次打開/刷新頁面時先調(diào)用一次
 div.addEventListener('click', run); // 每次點擊驗證碼的時候調(diào)用一次

 // 提交按鈕點擊事件
 btn.addEventListener('click', function () {
  if (input.value.toLowerCase() == str.toLowerCase()) {
  alert('驗證成功');
  } else {
  alert('驗證失敗');
  }
  run();
  input.value = '';
 })
 </script>
</body>

</html>

以上

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: