JavaScript implements the generation of 4-digit random verification code
|
This article example shares the specific code for JavaScript to generate a 4-digit random verification code for your reference. The specific content is as follows Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Generate 4-digit random verification code</title>
<style>
label{
color:aqua;
float:left;
font-size: 20px;
line-height:2em;
}
#tex{
display:inline-block;
width:50px;
height: 25px;
float:left;
text-align: center;
font-size:15px;
margin-top:10px;
}
#showyz{
border:3px solid green;
color:blue;
width:90px;
height:40px;
text-align:center;
float:left;
margin-left:15px;
line-height: 2.5em;
}
#hyz{
background-color:burlywood;
border:1px solid burlywood;
width:50px;
height:20px;
float: left;
margin-left:20px;
margin-top: 10px;
margin-right:15px;
}
#btn{
}
</style>
</head>
<body>
<label for="tex">Please enter the verification code:</label><input type="text" id="tex" maxlength="4" autofocus>
<div id="showyz"></div>
<div id="hyz">Change one</div><br>
<input type="button" id="btn" value="Confirm">
</body>
<script>
//Define an empty array to save 62 codes var codes=[];
//Save the code corresponding to the number into the codes array, the digital code range is [48-57]
for(var i=48;i<=57;i++){
codes.push(i);
}
//Save the codes corresponding to uppercase letters into the codes array, corresponding to the code range [65-90]
for(var i=65;i<=90;i++){
codes.push(i);
}
//Save the codes corresponding to lowercase letters into the codes array, corresponding to the code range [97-122]
for(var i=97;i<=122;i++){
codes.push(i);
}
//Define a method to generate a 62-bit random number as an array subscript, return a random code, and then convert the code into a corresponding number or letter function suiji(){
var arr=[]; //define an array to store 4-bit random numbers for(var i=0;i<4;i++){
var index = Math.floor(Math.random()*(61-0+1)+0); //Generate a random number var char = String.fromCharCode(codes[index]); //Decode arr.push(char); //Store in array arr }
return arr.join(""); //Convert the array to a string, separated by spaces, and return }
var yzm=suiji();//Call method to return the verification code to yzm//Get the above element var tex=document.getElementById("tex");
var showyz=document.getElementById("showyz");
var hyz = document.getElementById("hyz");
var btn = document.getElementById("btn");
//Write the verification code into the div with id showyzshowyz.innerHTML=yzm;
//Realize the function of changing the verification code hyz.onclick=function(){
yzm=suiji();
showyz.innerHTML=yzm;
}
//Verify the verification code you entered with the random verification code obtained btn.onclick=function(){
var textvalue=tex.value;//Get the input value if(textvalue.toLowerCase()==yzm.toLowerCase()){//Convert all values to lowercase for comparison alert("Verification code input is correct!");
yzm=suiji();
showyz.innerHTML=yzm;
tex.value="";
}
else{
alert("Verification code input is wrong, please re-enter!");
yzm=suiji();
showyz.innerHTML=yzm;
tex.value="";
}
}
</script>
</html>
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Basic operations of mysql learning notes table
>>: Detailed explanation of Docker basic network configuration
Recommend
Detailed explanation of Docker container cross-host multi-network segment communication solution
1. MacVlan There are many solutions to achieve cr...
Detailed explanation of the underlying implementation of descending index, a new feature of MySQL 8
What is a descending index? You may be familiar w...
JS implements simple addition and subtraction of shopping cart effects
This article example shares the specific code of ...
WeChat applet scroll-view implements a solution to duplicate data loading when pulling up
The scroll-view of WeChat applet has more bugs wh...
Detailed explanation of invisible indexes in MySQL 8.0
Word MySQL 8.0 has been released for four years s...
How to query whether the mysql table is locked
Specific method: (Recommended tutorial: MySQL dat...
Detailed explanation of CocosCreator optimization DrawCall
Table of contents Preface What is DrawCall How do...
How to store false or true in MySQL
MySQL Boolean value, stores false or true In shor...
Vue implements the magnifying glass function of the product details page
This article shares the specific code of Vue to i...
How to customize Docker images using Dockerfile
Customizing images using Dockerfile Image customi...
CSS3 property line-clamp controls the use of text lines
Description: Limit the number of lines of text di...
Example of horizontal arrangement of li tags in HTMl
Most navigation bars are arranged horizontally as...
Comparison of several examples of insertion efficiency in Mysql
Preface Recently, due to work needs, I need to in...
Detailed explanation of React component communication
Table of contents Component Communication Introdu...
Explanation of Mac connecting to remote servers through SSH in different terminals
Mac uses Shell (Terminal) SSH to connect to the r...