JavaScript clicks the button to generate a 4-digit random verification code

JavaScript clicks the button to generate a 4-digit random verification code

This article example shares the specific code of js to generate a 4-digit random verification code by clicking a button for your reference. The specific content is as follows

Effect picture:

Code:

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 div {
  width: 100px;
  height: 50px;
  background: red;
  text-align: center;
  line-height: 50px;
 }
 </style>
</head>
 
<body>
 <div id="yzm"></div>
 <button id="btn">Click to generate verification code</button>
 <script>
 // var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
 // array to string // var arr = str.split("");
 
 var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 // console.log(arr);
 //Call it when the page is just loaded sjs(arr);
 
 btn.onclick = function() {
  sjs(arr);
 }
 
 function sjs(arr) {
  var code = Math.floor(Math.random() * arr.length);
  var code1 = Math.floor(Math.random() * arr.length);
  var code2 = Math.floor(Math.random() * arr.length);
  var code3 = Math.floor(Math.random() * arr.length);
  var n = arr[code] + arr[code1] + arr[code2] + arr[code3];
  yzm.innerHTML = n
 }
 </script>
</body>
 
</html>

I will share a piece of code with you: Click to generate four random letters and numbers

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Click to generate a random number</title>
  <style>
  span{
    display: block;
    width: 110px;
    height: 50px;
    border: 1px solid red;
    text-align: center;
    line-height: 50px;
  }
  </style>
</head>
<body>
  <span id="demo" onclick="init();"></span>
  <script>
    init();
    function init(){
    var arr = [];
    for(var i=48;i<123;i++){
     if(i>57 && i<65) continue;
     if(i>90 && i<97) continue;
     arr.push(String.fromCharCode(i));
    }
    arr.sort(function () {
     return Math.random()-0.5;
    });
    arr.length=4;
    
    var span = document.getElementById('demo');
    span.textContent=(arr.join(""));
        }
  
  </script>
</body>
</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:
  • JS implements random generation of verification code
  • JavaScript implements random generation of verification code and verification
  • JavaScript implements the generation of 4-digit random verification code
  • JavaScript function encapsulates random color verification code (complete code)

<<:  MySQL learning notes help document

>>:  Detailed explanation of 10 common HTTP status codes

Recommend

HTML meta usage examples

Example Usage Copy code The code is as follows: &l...

Sharing of web color contrast and harmony techniques

Color contrast and harmony In contrasting conditi...

Tomcat maxPostSize setting implementation process analysis

1. Why set maxPostSize? The tomcat container has ...

Commonly used JavaScript array methods

Table of contents 1. filter() 2. forEach() 3. som...

Summary of five commands to check swap space in Linux

Preface Two types of swap space can be created un...

Diving into JS inheritance

Table of contents Preface Prepare Summarize n way...

Docker custom network container interconnection

Table of contents Preface –link Custom Network As...

Briefly describe the difference between MySQL and Oracle

1. Oracle is a large database while MySQL is a sm...

Detailed explanation and summary of the URL for database connection

Detailed explanation and summary of the URL for d...

Use CSS to create 3D photo wall effect

Use CSS to create a 3D photo wall. The specific c...

Examples of implementing progress bars and order progress bars using CSS

The preparation for the final exams in the past h...

Based on the special characters in the URL escape encoding

Table of contents Special characters in URLs URL ...

HTML Tutorial: title attribute and alt attribute

XHTML is the basis of CSS layout. jb51.net has al...