JS实现随机生成四位验证码（数字+大小写字母+随机颜色）

最新推荐文章于 2024-12-12 10:30:00 发布

原创最新推荐文章于 2024-12-12 10:30:00 发布 · 4.9k 阅读

7 ·

CC 4.0 BY-SA版权

日记专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个简单的验证码生成方法，使用HTML创建页面结构，CSS进行样式设计，JavaScript实现动态生成四位随机验证码的功能。通过数组存储字符集，随机选取字符填充到四个span标签中，同时应用随机颜色增强视觉效果。

html 部分

  <div id="box">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <button id="btn">生成验证码</button>

css部分

<style>
        #box{
            font-size: 20px;
        }
    </style>

script 部分

    var span = document.getElementsByTagName("span");
    var box = document.getElementById("box");
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        //声明一个strArr数组，存放0-9，26个字母的大小写；
        var strArr = [0,1,2,3,4,5,6,7,8,9];
        for(var i=0;i<26;i++) {
            strArr.push(String.fromCharCode(97+i)); // String.fromCharCode()方法
            strArr.push(String.fromCharCode(65+i)); //fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。
        }
        console.log(strArr);
        //声明一个newArr数组，数组长度固定为4，随机填入4个strArr数组中的数组元素，并写进每个span标签中
        //昨天写的数组乱序，派上用场了
        var newArr = [];
        for(var j = 0;j < 4; j++){
            var a = Math.floor(Math.random()*strArr.length);
            newArr.push(strArr[a]);
            strArr.splice(a,1);
            span[j].innerHTML = newArr[j];
            span[j].style.color = randomColor();
        }
        //之前写的随机生成颜色的函数完美代入！哈哈哈哈哈哈
        function randomColor() {
            var col = "rgb(";
            for(var i = 0;i < 3;i++){
                col += Math.floor(Math.random()*256)+",";
            }
            col = col.slice(0,-1);//rgb( 会多出一个 , 将它舍弃；
            col += ")"; //加上 ) 得到 rgb(***,***,***);
            return col;
        }
    }