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

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

Artikel empfehlen

So verwenden Sie Volume zum Übertragen von Dateien zwischen Host und Docker-Container

Ich habe zuvor einen Artikel über die Dateiübertr...

Handschriftliche Implementierung von new in JS

Inhaltsverzeichnis 1 Einführung in den neuen Oper...

So verstehen Sie das Ref-Attribut von React genau

Inhaltsverzeichnis Überblick 1. Erstellen eines R...

Installation und Verwendung der MySQL MyCat-Middleware

1. Was ist mycat Ein vollständig Open Source-Groß...

Interpretation von 17 Werbewirksamkeitsmaßen

1. 85 % der Anzeigen werden nicht gelesen <br ...

Verwenden Sie Angular CDK, um eine Service-Popup-Toast-Komponentenfunktion zu implementieren

Inhaltsverzeichnis 1. Umweltinstallation 2. Erste...

JavaScript implementiert Konstellationsabfragefunktion mit detailliertem Code

Inhaltsverzeichnis 1. Titel 2. Code 3. Ergebnisse...

Eine kurze Diskussion über die Rolle von Vue3 defineComponent

Inhaltsverzeichnis defineComponent-Überladungsfun...

Best Practices für die Bereitstellung des ELK7.3.0-Protokollsammlungsdienstes mit Docker

Schreiben Sie am Anfang Dieser Artikel behandelt ...

React implementiert eine mehrkomponentige Wertübertragungsfunktion über Conetxt

Die Wirkung dieser Funktion ist ähnlich wie vue的p...

MySql8 WITH RECURSIVE rekursive Abfrage Eltern-Kind-Sammlungsmethode

Hintergrund Wenn Sie eine Funktion entwickeln, di...

So beheben Sie den 10060-Unknow-Fehler, wenn Navicat eine Remote-Verbindung zu MySQL herstellt

Vorwort: Heute möchte ich mich per Remote-Zugriff...

Vue implementiert Tab-Tab-Umschaltung

In diesem Artikelbeispiel wird der spezifische Co...

Prometheus überwacht MySQL mithilfe der Grafana-Anzeige

Inhaltsverzeichnis Prometheus überwacht MySQL übe...

Zusammenfassung gängiger MySQL-DDL-Operationen

Bibliotheksverwaltung Erstellen einer Bibliothek ...