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

Detailed steps for configuring Tomcat server in IDEA 2020

The steps for configuring Tomcat in IDEA 2020 are...

CSS web page responsive layout to automatically adapt to PC/Pad/Phone devices

Preface There are many devices nowadays, includin...

12 types of component communications in Vue2

Table of contents 1. props 2..sync 3.v-model 4.re...

Example code for CSS to achieve horizontal lines on both sides of the text

This article introduces the sample code of CSS to...

Use CSS's clip-path property to display irregular graphics

clip-path CSS properties use clipping to create t...

WeChat applet canvas implements signature function

In the WeChat applet project, the development mod...

Docker deploys mysql to achieve remote connection sample code

1.docker search mysql查看mysql版本 2. docker pull mys...

Detailed explanation of monitoring NVIDIA GPU usage under Linux

When using TensorFlow for deep learning, insuffic...

Solution to 1045 error in mysql database

How to solve the problem of 1045 when the local d...

Simple tips to increase web page loading speed

The loading speed of a web page is an important in...

Docker installs mysql and solves the Chinese garbled problem

Table of contents 1. Pull the mysql image 2. Chec...

Does the % in the newly created MySQL user include localhost?

Normal explanation % means any client can connect...

Understanding the Lazy Loading Attribute Pattern in JavaScript

Traditionally, developers create properties in Ja...

Several principles for website product design reference

The following analysis is about product design pr...

Solve the problem of invalid utf8 settings in mysql5.6

After the green version of mysql5.6 is decompress...