JavaScript klickt auf die Schaltfläche, um einen 4-stelligen zufälligen Bestätigungscode zu generieren

In diesem Artikelbeispiel wird der spezifische Code von js zur Generierung eines 4-stelligen zufälligen Bestätigungscodes durch Klicken auf eine Schaltfläche zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Effektbild:

Code:

<!DOCTYPE html>
<html lang="de">
 
<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <title>Dokument</title>
 <Stil>
 div {
  Breite: 100px;
  Höhe: 50px;
  Hintergrund: rot;
  Textausrichtung: zentriert;
  Zeilenhöhe: 50px;
 }
 </Stil>
</Kopf>
 
<Text>
 <div id="yzm"></div>
 <button id="btn">Klicken Sie hier, um einen Bestätigungscode zu generieren</button>
 <Skript>
 // var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
 // Array in 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"];
 // konsole.log(arr);
 //Rufen Sie es auf, wenn die Seite gerade geladen wurde sjs(arr);
 
 btn.onclick = Funktion() {
  sjs(arr);
 }
 
 Funktion 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
 }
 </Skript>
</body>
 
</html>

Ich werde einen Codeabschnitt mit Ihnen teilen: Klicken Sie, um vier zufällige Buchstaben und Zahlen zu generieren

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Klicken Sie hier, um eine Zufallszahl zu generieren</title>
  <Stil>
  Spanne{
    Anzeige: Block;
    Breite: 110px;
    Höhe: 50px;
    Rand: 1px durchgehend rot;
    Textausrichtung: zentriert;
    Zeilenhöhe: 50px;
  }
  </Stil>
</Kopf>
<Text>
  <span id="demo" onclick="init();"></span>
  <Skript>
    init();
    Funktion init(){
    var arr = [];
    für(var i=48;i<123;i++){
     wenn (i>57 und i<65), weiter;
     wenn (i>90 und i<97), weiter;
     arr.push(String.fromCharCode(i));
    }
    arr.sort(Funktion () {
     gibt Math.random()-0,5 zurück;
    });
    arr.Länge=4;
    
    var span = document.getElementById('demo');
    span.textContent=(arr.join(""));
        }
  
  </Skript>
</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

JS implementiert die zufällige Generierung von Bestätigungscodes
JavaScript implementiert die zufällige Generierung von Bestätigungscode und Bestätigung
JavaScript implementiert die Generierung eines 4-stelligen zufälligen Bestätigungscodes
JavaScript-Funktion kapselt zufälligen Farbüberprüfungscode (vollständiger Code)

<<: Hilfedokument „MySQL-Lernhinweise“

>>: Detaillierte Erklärung der 10 häufigsten HTTP-Statuscodes

Über React Native, das keine Verbindung zum Simulator herstellen kann

JavaScript klickt auf die Schaltfläche, um einen 4-stelligen zufälligen Bestätigungscode zu generieren

Über React Native, das keine Verbindung zum Simulator herstellen kann

js, um die Produktionsmethode des Karussells zu realisieren

7 Möglichkeiten, Elemente mit CSS vertikal zu zentrieren

VMware ESXi 5.5 Bereitstellungs- und Konfigurationsdiagrammprozess

Befehle zum Suchen der Domänen-IP-Adresse im Linux-Terminal (fünf Methoden)

Ausführliche Erläuterung der Auswirkungen von NULL auf Indizes in MySQL

Zusammenfassung der JavaScript-Timertypen

Zusammenfassung des Verständnisses des virtuellen DOM in Vue

Das ganz links stehende Übereinstimmungsprinzip des MySQL-Datenbankindex

Detailliertes Beispiel zum Auffinden und Optimieren langsamer SQL-Abfragen in MySQL

Artikel empfehlen

Zusammenfassung der 7 Fallstricke bei der Verwendung von React

Analysieren der Knotenereignisschleife und der Nachrichtenwarteschlange

Zusammenfassung der genauen Berechnungen verschiedener Abstände/Scrolldistanzen in einem Fenster

Lösen Sie das Problem, dass await in forEach nicht funktioniert

Fügen Sie eine schwebende Eingabeaufforderung für das Kopfzeilensymbol in der ElementUI-Tabelle hinzu

Detaillierte Erläuterung des Watch-Listener-Beispiels in vue3.0

HTML-Hyperlinks im Detail erklärt

Tutorial zur Optimierung der Installationskonfiguration von MySQL 8.0.18

Vue Uniapp realisiert den Segmentierungseffekt

MySQL 1130-Ausnahme, Remote-Anmeldung nicht möglich – Lösung

uni-app implementiert NFC-Lesefunktion

Das Bildelement img hat in IE6 zusätzlichen Leerraum

Mehrere Möglichkeiten zum Festlegen der Ablaufzeit von localStorage

Detaillierte Erklärung zur Verwendung von $props, $attrs und $listeners in Vue

Probleme und Lösungen bei der Installation von Docker in der Alibaba Cloud