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

So geben Sie chinesische Zeichen im Linux-Kernel aus

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

So geben Sie chinesische Zeichen im Linux-Kernel aus

Das Front-End muss wissen, wie Bilder verzögert geladen werden (drei Methoden)

jQuery implementiert Navigationsleisteneffekt mit Erweiterungsanimation

MySQL effiziente Abfrage Left Join und Gruppieren nach (plus Index)

Gründe, warum MySQL den Abfrage-Cache abgebrochen hat

Lösungen für Unterschiede in der Browserinterpretation hinsichtlich Größe, Breite und Höhe in CSS

Javascript-Grundlagen: Detaillierte Erklärung der Operatoren und der Flusskontrolle

JavaScript Canvas Tetris-Spiel

Tipps zum Anzeigen von Verlaufsdatensätzen und Hinzufügen von Zeitstempeln in Linux

Lösen Sie das Problem mehrerer Listener, die beim Starten von Tomcat in Idea gemeldet werden

Artikel empfehlen

Acht Implementierungslösungen für domänenübergreifendes JS-Frontend

CSS3 realisiert das Papierflugzeug aus der Kindheit

vitrualBox+ubuntu16.04 installieren Sie Python3.6, neuestes Tutorial und detaillierte Schritte

base target="" gibt das Ziel des Basislinks zum Öffnen des Frames an

HTML+CSS zum Erstellen eines Dropdown-Menüs

So legen Sie den Fokus auf HTML-Elemente fest

Details zum JavaScript-Timer

Verwendung des if-Urteils in HTML

Erweiterte benutzerdefinierte JavaScript-Ausnahme

JavaScript, um einen ausgefallenen Karusselleffekt zu erzielen

MySQL etabliert eine effiziente Indexbeispielanalyse

Beschreibung des hr-Tags in verschiedenen Browsern

Reines HTML und CSS, um den JD-Karusselleffekt zu erzielen

HTML implementiert ein schreibgeschütztes Textfeld und kann den Inhalt nicht ändern

CSS-Anfänger-Tutorial: Hintergrundbild füllt den gesamten Bildschirm