Javascript点击事件获取四位数验证码

最新推荐文章于 2022-10-30 10:33:36 发布

Niugu0502

最新推荐文章于 2022-10-30 10:33:36 发布

阅读量2.2k

点赞数 3

分类专栏： js 文章标签： js 四位数验证码点击事件

本文链接：https://blog.csdn.net/Niugu0502/article/details/82924055

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

写一个简单的四位数验证码以供大家学习

以下是HTML代码:

<body>
    <div id="getCode"></div>
    <button id="btn">获取验证码</button>
</body>

CSS代码:

<style>
    #getCode {
        width: 100px;
        float: left;
        background-color: #ccc;
        text-align: center;
    }
</style>

JS代码:

 //点击事件触发生成四位数字验证码
    document.getElementById("btn").onclick = function () {
        //初始化idCode----->idCode为四位数验证码
        var idCode = "";
        //颜色的首字符
        var str = "#";
        //颜色数组 0~9 a~f
        var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
        //验证码数字:0~9  英文:a~z, A~Z 总共62个
        var nums = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "a", "s", "d", "f", "g", "h",
            "j", "k", "l", "z", "x", "c", "v", "b", "n", "m", "A", "W", "E", "R", "T", "Y", "U", "I",
            "O", "P", "A", "S", "D", "F", "G", "H", "J", "K", "L", "Z", "X", "C", "V", "B", "N", "M",
            "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
        //字号
        var idFonsize = ["1", "2", "3", "4", "5", "6", "7"];
        //随机生成四个验证码
        for (var i = 0; i < 4; i++) {
            //随机生成六位十六进制颜色值
            for (var j = 0; j < 6; j++) {
                var sum = arr[parseInt(Math.random() * 16)];
                str += sum;
            }
            //随机生成验证码的数字或者字母的下标0~61
            var p = parseInt(Math.random() * 62);
            //随机获取字号大小的下标0~6
            var f = parseInt(Math.random() * 7);
            //拼接随机生成颜色和字体大小的验证码
            idCode += "<font color='" + str + "' size = '" + idFonsize[f] + "'>" + nums[p] + "</font>";
        }
        //innerHTML用于设置或返回指定标签之间的 HTML 内容  这里是把idCode添加到 id="getCode"的标签下面
        document.getElementById("getCode").innerHTML = idCode;
    };

写得很一般,不要介意哈

Niugu0502

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Javascript点击事件获取四位数验证码

写一个简单的四位数验证码以供大家学习以下是HTML代码:&lt;body&gt; &lt;div id="getCode"&gt;&lt;/div&gt; &lt;button id="btn"&gt;获取验证码&lt;/button&gt;&lt;/body&gt;CSS代码:&lt;style&gt; #getCode
复制链接

扫一扫