求助,js编程实现随机验证码功能。(数字图片由1~9组成的,随机4个组合)

 

<!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> 

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

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

这个验证码百度一大把。。

您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632