JS实现二维码验证效果

最新推荐文章于 2021-05-17 19:01:54 发布

红斗笠

最新推荐文章于 2021-05-17 19:01:54 发布

阅读量433

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_38061311/article/details/100040805

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS实现登录二维码验证效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script src="assembly/jqarticle/jparticle.min.js"></script>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    
        <div class="layui-row">
            <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                <div class="layui-form-item">
                    <input type="text" name="vercode" id="vercode" lay-verify="required|vercodes" autocomplete="off" placeholder="验证码" class="layui-input" maxlength="4">
                    <i class="layui-icon layui-icon-vercode zyl_lofo_icon"></i>
                </div>
            </div>
            <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                <div class="zyl_lofo_vercode zylVerCode" onclick="zylVerCode()"></div>
            </div>
        </div>
    
        <script type="text/javascript">
            $(function(){
                zylVerCode();//初始化生成随机数
            });
    
            //生成随机数
            function zylVerCode(len){
                len = len || 4;
                var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';//默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
                var maxPos = $chars.length;
                var zylCode = '';
                for (i = 0; i < len; i++) {
                    zylCode += $chars.charAt(Math.floor(Math.random() * maxPos));
                }
                $(".zylVerCode").html(zylCode);
            }
    
        </script>
    </body>
    </html>

效果:
在这里插入图片描述

红斗笠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS实现二维码验证效果

JS实现登录二维码验证效果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery.min.js"></script>...
复制链接

扫一扫

专栏目录