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

Detaillierte Erläuterung der Anwendungsbeispiele für Vue-Router 4

Inhaltsverzeichnis 1. Installieren und erstellen ...

Zusammenfassung der HTML-Wissenspunkte für das Frontend (empfohlen)

1. HTML-Übersicht htyper Textauszeichnungssprache...

Detaillierte Erläuterung von CSS, um den Effekt der Beleuchtung des Rahmens durch Nachahmung der Windows 10-Maus zu erzielen

Nach der Installation des neuesten Windows 10-Upd...

Tipps zum Listenaufbau für Website-Wartungsseiten

Und oft ist es für Wartungsarbeiten erforderlich, ...

So schreiben Sie asynchrone Aufgaben in modernem JavaScript

Vorwort In diesem Artikel untersuchen wir die Ent...

mysql charset=utf8 verstehen Sie wirklich, was es bedeutet

1. Schauen wir uns zunächst eine Anweisung zur Ta...

Detaillierte Erläuterung der Wissenspunkte zur Echtzeitsicherung der MySQL-Datenbank

Vorwort Der Bedarf an Echtzeit-Datenbanksicherung...

Vue+openlayer5-Methode zum Abrufen der Koordinaten des aktuellen Mauszeigers

Vorwort: Wie erhält man die Koordinaten der aktue...

HTML-Tabellen-Tag-Tutorial (17): Tabellentitel vertikales Ausrichtungsattribut VALIGN

Die Tabellenüberschrift kann über oder unter der ...

So schreiben Sie eine Node.JS-Version eines Spiels

Inhaltsverzeichnis Überblick Build-Prozess Verwan...

CSS-Lösung für mehrspaltiges Layout

1. Feste Breite + adaptiv Erwarteter Effekt: fest...

Tiefgreifendes Verständnis der angegebenen IE-Browser-Rendering-Methode

<meta http-equiv="X-UA-kompatibel" c...

Detaillierte Erläuterung der Konfiguration und Optimierung des statischen Nginx-Dateidienstes

Stammverzeichnis und Indexdatei Die Root-Direktiv...

So schreiben Sie ein MySQL-Sicherungsskript

Vorwort: Die Bedeutung einer Datenbanksicherung l...

Website-Erstellungs-Tutorial für Anfänger: Lernen Sie, in zehn Tagen eine Website zu erstellen

Das 10-tägige Tutorial verwendet eine äußerst ver...