인증 코드 획득 효과를 얻기 위해 JavaScript를 사용하는 방법-JS 튜토리얼-php.cn

인증 코드 획득 효과를 얻기 위해 JavaScript를 사용하는 방법

yulia

풀어 주다： 2018-10-17 10:35:12

원래의

9539명이 탐색했습니다.

친구 여러분, 웹사이트를 탐색할 때 거의 모든 웹사이트에 로그인할 때 인증코드 확인이 필요하다는 사실을 알고 계셨나요? JS를 사용하여 인증코드를 얻는 방법을 알고 계시나요? 이 글에서는 JS를 사용하여 인증 코드를 작성하는 방법과 인증 코드를 얻기 위한 코드를 JS와 공유하는 방법에 대해 설명합니다. 이는 특정 참조 값이 있으며 관심 있는 친구들이 참조할 수 있습니다.

JS를 사용하여 인증 코드를 받으려면 random(), if 함수, for 루프 등과 같은 JavaScript에 대한 많은 지식을 사용해야 합니다. 확실하지 않은 경우 다음을 참조하세요. PHP 중국어 웹사이트에서 관련 기사를 확인하거나 JavaScript 비디오 튜토리얼을 방문하세요.

JS에서 직접 작성한 인증 코드를 가져오는 간단한 코드(CSS 스타일 설정, JavaScript 부분에 집중), 구체적인 코드는 다음과 같습니다.

HTML 부분:

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

로그인 후 복사

CSS 부분:

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

로그인 후 복사

JavaScript 부분:

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("验证通过");
            }
        }

로그인 후 복사

확인 코드를 얻기 위한 JavaScript 구현의 구체적인 단계는 코드 주석에 자세히 설명되어 있습니다. 확인 코드 효과는 아래와 같습니다.

인증 코드 획득 효과를 얻기 위해 JavaScript를 사용하는 방법