How to use JavaScript to achieve the effect of obtaining verification code-JS Tutorial-php.cn

How to use JavaScript to achieve the effect of obtaining verification code

yulia

Release： 2018-10-17 10:35:12

Original

9514 people have browsed it

Have you noticed when browsing the website that almost every website requires verification code verification when logging in? Do you know how to use JS to achieve the effect of obtaining the verification code? This article will talk to you about how to use JS to write verification codes, and share the code for obtaining verification codes with JS. It has certain reference value, and interested friends can refer to it.

If you want to use JS to obtain the verification code, you need to use a lot of knowledge in JavaScript, such as: random (), if function, for loop, etc. If you are not sure, you can refer to the PHP Chinese website Related articles, or visit JavaScript Video Tutorial.

I wrote a simple code to get the verification code using JS (just simply set the CSS style, focus on the JavaScript part), the specific code is as follows:

HTML part:

<body onload=&#39;createCode()&#39;> 
        <div>验证码：  
            <input type = "text" id = "input"/>  
            <input type="button" id="code" onclick="createCode()" style="width:60px" title=&#39;点击更换验证码&#39; /></br>
            <input type = "button" value = "验证" onclick = "validate()"/>
        </div>  
</body>

Copy after login

CSS part:

 #code{
             font-family:Arial,宋体;
             font-style:italic;
             color:green;
             border:0;
             padding:5px 10px;
             letter-spacing:3px;
             font-weight:bolder;
         }

Copy after login

JavaScript part:

var code ; //在全局定义验证码         
        function createCode(){
             code = "";   
             var codeLength = 4;//验证码的长度  
             var checkCode = document.getElementById("code");   
             var random = new Array(0,1,2,3,4,5,6,7,8,9,&#39;A&#39;,&#39;B&#39;,&#39;C&#39;,&#39;D&#39;,&#39;E&#39;,&#39;F&#39;,&#39;G&#39;,
             &#39;H&#39;,&#39;I&#39;,&#39;J&#39;,&#39;K&#39;,&#39;L&#39;,&#39;M&#39;,&#39;N&#39;,&#39;O&#39;,&#39;P&#39;,&#39;Q&#39;,&#39;R&#39;,&#39;S&#39;,&#39;T&#39;,&#39;U&#39;,&#39;V&#39;,&#39;W&#39;,&#39;X&#39;,&#39;Y&#39;,
             &#39;Z&#39;);//随机数  
             for(var i = 0; i < codeLength; i++) {//循环操作  
                var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）  
                code += random[index];//根据索引取得随机数加到code上  
            }  
            checkCode.value = code;//把code值赋给验证码  
        }
        //校验验证码  
        function validate(){  
            var inputCode = document.getElementById("input").value.toUpperCase(); 
            //取得输入的验证码并转化为大写        
            if(inputCode.length <= 0) { //若输入的验证码长度为0  
                alert("请输入验证码！"); //则弹出请输入验证码  
            }else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
                alert("验证码输入错误!"); //则弹出验证码输入错误  
                createCode();//刷新验证码  
                document.getElementById("input").value = "";//清空文本框  
            }else { //输入正确时  
                alert("验证通过");
            }
        }

Copy after login

The specific steps for JavaScript to obtain the verification code have been explained in detail in the code comments and will not be repeated here. , the verification code effect is shown in the figure below:

How to use JavaScript to achieve the effect of obtaining verification code

The above introduces in detail the specific steps of JS implementation to obtain the verification code code. It is used more in the project, and I hope everyone can do it themselves. Give it a try and see if you can write such an effect. I hope this article will be helpful to you!

【Recommended related tutorials】

1. JavaScript Chinese Reference Manual
2. JavaScript Graphic Tutorial
3. bootstrap tutorial

The above is the detailed content of How to use JavaScript to achieve the effect of obtaining verification code. For more information, please follow other related articles on the PHP Chinese website!