자바스크립트에서 4자리 무작위 인증코드를 구현하는 방법

JavaScript에서 4자리 무작위 인증코드를 구현하는 방법: 먼저 "function random(max,min){...}"을 통해 임의의 숫자를 생성한 다음 "function code()를 통해 임의의 4자리 인증코드를 생성합니다. ){...}" 코드; 마지막으로 인증 코드 기능을 호출합니다.

이 글의 운영 환경: windows7 시스템, javascript 버전 1.8.5, DELL G3 컴퓨터

javascript는 4자리 무작위 인증 코드를 어떻게 구현하나요?

JS는 4자리 무작위 인증코드를 구현합니다

대소문자를 구분하지 않고 난수를 통해 숫자가 포함된 4자리 난수를 작성합니다.

CSS 스타일

p{
 width: 60px;
 height: 20px;
 display: inline-block;
 letter-spacing: 3px;
 border: 1px solid red;
}
#p{
 height: 20px;
 margin-bottom: 10px;
}
#btn,p:hover{
 cursor: default;
}
button{
 display: block;
}

주요 부분

<p id="box">
验证码
 <input type="text" id="int" />
 <p id="p"></p>
 <p id="p"></p>
 <button id="btn">提交</button>
</p>

JS 부분

//随机数
function random(max,min){
 return Math.round(Math.random()*(max-min)+min);
}
//随机4位验证码
function code(){
 //将数字、小写字母及大写字母输入
 var str="1234567890qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM";
 //给一个空字符串
 var res='';
 //循环4次，得到4个字符
 for(var i=0;i<4;i++){
 //将得到的结果给字符串，调用随机函数，0最小数，62表示数字加字母的总数
 res+=str[random(0,62)];
 }
 p.innerHTML=res;
}
code(); //调用验证码函数
p.onclick=code; //点击也可以刷新验证码
//验证验证码
btn.onclick=function(){
 var int=document.getElementById("int").value;//获取用户输入的值
 var p=document.getElementById("p").innerText;//获取验证码
 //判断用户输入与验证码的大写一致(不分大小写)
 if(int.toUpperCase()==p.toUpperCase()){
 p.innerHTML="验证码正确";
 }else{
 p.innerHTML="验证码错误";
 }
}

구현 결과

Summary

Math.round(): 반올림
Math.random( ): 임의의 숫자
toUpperCase( ): 문자열을 대문자로 변환

추천 학습: "javascript 고급 튜토리얼"

위 내용은 자바스크립트에서 4자리 무작위 인증코드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!