用PS把你脑子治好了 2021-06-04 21:05 采纳率: 100%
浏览 51
已采纳

求助，js编程实现随机验证码功能。（数字图片由1～9组成的，随机4个组合）

 

  • 写回答

3条回答 默认 最新

  • CSDN专家-林老师 2021-06-04 21:10
    关注
    <!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
        <title>JS验证码</title> 
        <style type="text/css">
        .code {
            background-image: url(code.jpg);
            font-family: Arial;
            font-style: italic;
            color: Red;
            border: 0;
            padding: 2px 3px;
            letter-spacing: 3px;
            font-weight: bolder;
        }

        .unchanged {
            border: 0;
        }
    </style> 
       
    <script language="javascript" type="text/javascript">  

        var code; //在全局 定义验证码   
        function createCode() {
            code = "";
            var codeLength = 4;//验证码的长度   
            var checkCode = document.getElementById("checkCode");
            var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);//所有候选组成验证码的字符，当然也可以用中文的   

            for (var i = 0; i < codeLength; i++) {


                var charIndex = Math.floor(Math.random() * 10);
                code += selectChar[charIndex];


            }
            //       alert(code);   
            if (checkCode) {
                checkCode.className = "code";
                checkCode.value = code;
            }

        }

        function validate() {
            var inputCode = document.getElementById("input1").value;
            if (inputCode.length <= 0) {
                alert("请输入验证码！");
            }
            else if (inputCode != code) {
                alert("验证码输入错误！");
                createCode();//刷新验证码   
            }
            else {
                alert("OK");
            }

        }

    </script> 
</head> 

<body onload="createCode()"> 
    <form  action="#"> 
             <input  type="text"    id="input1" /> 
            <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged"
            style="width: 80px"   /><br /> 
            <input id="Button1"   onclick="validate();" type="button" value="确定" />   
    </form> 
</body> 

</html> 

    代码如上，可以自己稍微修改一下样式。

    如遇到样式修改问题欢迎追问，满意请采纳哦。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 公交车和无人机协同运输
  • ¥15 stm32代码移植没反应
  • ¥15 matlab基于pde算法图像修复，为什么只能对示例图像有效
  • ¥100 连续两帧图像高速减法
  • ¥15 组策略中的计算机配置策略无法下发
  • ¥15 如何绘制动力学系统的相图
  • ¥15 对接wps接口实现获取元数据
  • ¥20 给自己本科IT专业毕业的妹m找个实习工作
  • ¥15 用友U8：向一个无法连接的网络尝试了一个套接字操作，如何解决？
  • ¥30 我的代码按理说完成了模型的搭建、训练、验证测试等工作(标签-网络|关键词-变化检测)