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
How to manually build a new image with docker
This article introduces the method of manually bu...
Detailed explanation of the process of deploying SpringBoot project through Docker plug-in in IDEA
1. Configure Docker remote connection port Locate...
Coexistence of python2 and python3 under centos7 system
The first step is to check the version number and...
Solve the problem that the CentOS7 virtual machine cannot access the Internet and set up the CentOS7 virtual machine to use a static IP to access the Internet
I was playing with CentOS in a VMware virtual mac...
How to operate Linux file and folder permissions
Linux file permissions First, let's check the...
mysql 8.0.20 winx64.zip compressed version installation and configuration method graphic tutorial
The installation tutorial of mysql 8.0.20 winx64....
jQuery realizes the effect of theater seat selection and reservation
jQuery realizes the effect of theater seat select...
The first step in getting started with MySQL database is to create a table
Create a database Right click - Create a new data...
The difference between MySQL user management and PostgreSQL user management
1. MySQL User Management [Example 1.1] Log in to ...
TypeScript decorator definition
Table of contents 1. Concept 1.1 Definition 1.2 D...
Simple implementation of handheld barrage function + text shaking special effects code based on JS
There was a shaking barrage on TikTok a while ago...
Detailed steps for adding hosts you need to monitor in zabbix
Add monitoring host Host 192.168.179.104 is added...
Beginner's guide to building a website ⑥: Detailed usage of FlashFXP
Today I will introduce the most basic functions of...
WeChat applet uses the video player video component
This article example shares the specific code of ...
Web page creation basic declaration document type description (DTD
Using CSS layout to create web pages that comply w...