用JS简单生成4位数验证码

时间 2019-11-08

原文原文链接

本文为你们分享了数字字母验证码的具体实现代码，供你们参考，具体内容以下bash

解体思路建立一个文件，要求获取由随机数字字母组成的四位验证码，并保证四位数字字母不重复，并且让四位随机验证码显示在页面上。dom

首先咱们封装一个函数，让这个函数随机获取四个由数字字母组成的验证码。

function fn2() {
        var str = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM0123456789'; (这里的字符能够随便写)
        var str2 = '';
        (利用for循环来随机得到字符)
        for (var i = 0; i < 4; i++) {
            var n = Math.round(Math.random() * 61) (61表明的是字符串的长度)
            
接下来咱们作字符串的拼接，在拼接以前，先判断是否由字符串有相同的字符，若是有，则不拼接。
if (str2.indexOf(str[n]) === -1) {
                str2 = str2 + str[n];
若是获得的字符在str2中存在，则须要让循环再执行一次。
else{
    i--
}
return str2
输出str2的返回值
复制代码

下一步咱们要把生成的验证码显示再页面上。函数

先在body里添加一个i元素，设置一个类名，而后获取这个元素，并实现每点击一次盒子实现验证码的变换ui

<body>
 <i id="box"></i>
 </body>
 <script>
 ······(此部分代码手懒不写)
 var box =document.getElementById('box')
    box.innerHTML = fn4()
    box.onclick = function () {
        box.innerHTML = fn4()
    }
 </script>
复制代码

最终咱们就能够实现获取四位由数字和字母组成的验证码在不重复的条件下，点击标签 i 并显示在页面上的效果了。spa