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
The concrete implementation of JavaScript exclusive thinking
In the previous blog, Xiao Xiong updated the meth...
Detailed explanation of Linux system software installation commands based on Debian (recommended)
Introduction to Debian Debian in a broad sense re...
How to add a column to a large MySQL table
The question is referenced from: https://www.zhih...
MYSQL database basics - Join operation principle
Join uses the Nested-Loop Join algorithm. There a...
Hyper-V Introduction and Installation and Use (Detailed Illustrations)
Preface: As a giant in the IT industry, Microsoft...
How to quickly deploy an Elasticsearch cluster using docker
This article will use Docker containers (orchestr...
7 major elements of web page redesign Share the 7 major elements of web page redesign
Shopify Plus is the enterprise version of the e-c...
CSS uses BEM naming convention practice
When you see a class, what information do you wan...
Comparing Document Locations
<br />A great blog post by PPK two years ago...
A quick solution to accidentally delete MySQL data (MySQL Flashback Tool)
Overview Binlog2sql is an open source MySQL Binlo...
Avoid abusing this to read data in data in Vue
Table of contents Preface 1. The process of using...
Teach you how to quickly enable self-monitoring of Apache SkyWalking
1. Enable Prometheus telemetry data By default, t...
Detailed explanation of JS array methods
Table of contents 1. The original array will be m...
The docker container directly runs to obtain the public IP operation through ping
Get the local public IP address through the conta...
Hide HTML elements through display or visibility
Sometimes we need to control whether HTML elements...