使用原生js简单生成验证码

️楠小弟

已于 2023-03-12 20:36:00 修改

阅读量156

点赞数

分类专栏： # html+css+js 文章标签： javascript html 前端

于 2023-03-12 20:29:49 首次发布

本文链接：https://blog.csdn.net/qq_45066822/article/details/129480445

版权

html+css+js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用原生js实现简单的验证码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<style>
    #imgy{
        width:80px;
        height:30px;
        border-radius: 5px;
        border: 0;
        background:url('/imag/yzm.png') no-repeat ;
        background-size: 100% 100%;
        text-align: center;
        font-size: 18px;
        font-style: italic;
        font-weight: bold;
        outline: none;

    }
</style>
<body>
<div style="width: 300px;height: 350px;margin: 100px auto">
    <form action="zhuce" method="post">
        <span>账号：</span><input type="text" name="na"><br>
        <span>验证码：</span><input style="width: 60px" type="text" name="yz">
        <input id="imgy" name="sjs" readonly placeholder="验证码"><br>
        <span>输入密码：</span><input type="text" name="pw"><br>
        <span>再次输入密码：</span><input type="text" name="apw"><br>
        <input type="submit" value="注册">&nbsp;&nbsp;<a href="login">取消</a>
    </form>
    <script type="text/javascript">
        window.onload = function () {
            var str = "0123456789AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz";
            var nu = 0;
            var im = document.getElementById("imgy");
            sj();//初始化
            im.onclick = function () {
                sj();
            };

            function sj() {
                var s = "";
                for (let i = 0; i < 4; i++) {
                    nu = Math.floor(Math.random() * 62);
                    s = s.concat(" ", str.charAt(nu));
                }
                im.value = s;
            }
        };
    </script>
</div>
</body>
</html>