js实现验证码功能

柔情只为你懂 2023-02-28 01:45 42阅读 0赞

**\#前面是拆解着讲的，不想看可以直接跳过，带注释的完整版代码和效果在后面**

#### 首先在页面中准备一个输入框，一个显示验证码的盒子和一个提交按钮 ####

#### 然后加亿些样式 ####

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）  
![在这里插入图片描述][20200719102601115.png]  
好，那么开始写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();
    })

#### 因为验证码不是每次刷新页面就生成一次，看不清是可以换的，要多次生成，所以就把生成验证码的部分写在一个函数里 ####

**大概说明一下这部分，原理大概就是创建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()函数将两个字符串都转化成小写之后再做的比较

### 至此，功能就都实现的差不多了 ###

### 看效果： ###

![在这里插入图片描述][20200719103348786.png]  
![在这里插入图片描述][20200719103355512.png]  
![在这里插入图片描述][20200719103403668.png]

## 带注释的完整版代码如下： ##

<!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>

##### 以上 #####

ヾ(≧∪≦\*)ノ〃

[20200719102601115.png]: /images/20230209/31f94e3abaea408cb3bd2db889c16254.png
[20200719103348786.png]: /images/20230209/d1b47058f9034ba392cacea4c68287ed.png
[20200719103355512.png]: /images/20230209/b61cedee81d14fc5b4b819b685b31c78.png
[20200719103403668.png]: /images/20230209/48449ea44fbb40b7bc1b25d1263d20f4.png