So implementieren Sie einen vierstelligen Zufallsverifizierungscode in Javascript

So implementieren Sie einen vierstelligen zufälligen Bestätigungscode in JavaScript: Erstellen Sie zuerst eine Zufallszahl über „function random(max,min){...}“ und erstellen Sie dann einen zufälligen vierstelligen Bestätigungscode über „function code(“; ){...}"-Code; rufen Sie schließlich die Bestätigungscode-Funktion auf.

Die Betriebsumgebung dieses Artikels: Windows7-System, Javascript-Version 1.8.5, DELL G3-Computer

Wie implementiert Javascript einen vierstelligen zufälligen Bestätigungscode?

JS implementiert einen 4-stelligen Zufallsverifizierungscode

Schreiben Sie eine 4-stellige Zufallszahl, bei der die Groß- und Kleinschreibung nicht berücksichtigt wird und die Zahlen durch Zufallszahlen enthält.

CSS-Stil

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

Hauptteil

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

JS-Teil

//随机数
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="验证码错误";
 }
}

Implementierungsergebnis

Zusammenfassung

Math.round(): Rundung
Math.rand om(): Zufallszahl
toUpperCase( ): Konvertieren Sie die Zeichenfolge in Großbuchstaben

Empfohlenes Lernen: „Javascript-Tutorial für Fortgeschrittene“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen vierstelligen Zufallsverifizierungscode in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!