JavaScript-Implementierung des Verifizierungscode-Falls

In diesem Artikel wird der spezifische Code für JavaScript zur Erzielung des Bestätigungscode-Effekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Im heutigen Fall ist der Effekt wie folgt:

Bei der Umsetzung dieses Falls gibt es eigentlich nicht viele Schwierigkeiten. Schauen wir uns das gemeinsam an.

Die Implementierung von HTML und CSS wird hier nicht erläutert. Sie können es selbst implementieren, indem Sie den folgenden Code vergleichen und auf die Details achten.

Schauen wir uns als nächstes die Implementierung von js an:

Wir müssen zwei Dinge tun:

1. Realisieren Sie die zufällige Generierung von Bestätigungscodes, sodass diese generiert werden können, wenn die Seite aktualisiert oder zum Ändern angeklickt wird
2. Vergleichen Sie die Eingabezeichenfolge und den Bestätigungscode

Zuerst müssen wir eine For-Schleife und Math.round(Math.random()*n) verwenden, um in jeder Schleife Zufallszahlen zu generieren.

Zweitens müssen wir nur die vom Benutzer über input.value eingegebene Zeichenfolge abrufen und sie dann mit der zuvor zufällig generierten Zeichenfolge vergleichen (mit ===).

Weitere Details sind im Code zu finden.

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        .Container{
            Breite: 400px;
            Höhe: 100px;
            Rand: 100px automatisch;
            Hintergrundfarbe: hsla (180, 73 %, 78 %, 0,199);
            Rahmenradius: 20px;
            Textausrichtung: zentriert;
            Polsterung: 20px;
        }
        #überprüfen{
            Anzeige: Inline-Block;
            Breite: 100px;
            Höhe: 30px;
            Textausrichtung: zentriert;
            Hintergrundfarbe: rgba(128, 128, 128, 0,158);
            Farbe: blau;
            Schriftgröße: 26px;
            Schriftstil: kursiv;
            Buchstabenabstand: 2px;
            Schriftfamilie: Arial, Helvetica, serifenlos;
            Rand unten: 10px;
        }
        .ma{
            Rand unten: 12px;
        }

    </Stil>
</Kopf>

<Text>
    <div Klasse="Container">
        <div>
            <span id="check">adf34y</span>
            <a href="#" id="checka">Wenn es nicht klar ist, ändern Sie es</a>
        </div>
        <div Klasse="ma">
            <label for="zheng">Bestätigungscode</label>
            <Eingabetyp="Text" id="zheng">
        </div>
        <button id="btn">OK</button>
    </div>

    <Skript>
        sei Summe=[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];
        var check = document.getElementById("check");
        Variablencode;
        
        Funktion Spaß () {
            lass str="";
            für (lass i = 0; i < 6; i++) {
                let pos=Math.round(Math.random()*15); //Beachten Sie diese Schreibweise, holen Sie sich die Zufallszahl str+=sum[pos];
            }
            check.innerHTML=str;
            gibt str zurück;
        }

        fenster.onload = funktion(){
            Code=Spaß();
        }

        let checka = document.getElementById("checka");
        checka.onclick=Funktion(){
            Code=Spaß();
        }
        
        let btn = document.getElementById("btn");
        btn.onclick=Funktion(){
            Lassen Sie t = document.getElementById("zheng").value;
            console.log(t)
            wenn(t==code){
                Warnung("richtig");
                Code=Spaß();
                document.getElementById("zheng").value="";
            }
            anders{
                Warnung("Fehler");
                document.getElementById("zheng").value="";
            }
        }
        

    </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:

JSP-Methode zum Generieren eines Seitenüberprüfungscodes [mit Code]
Beispielcode eines JavaScript-Verifizierungscodes (mit Wirkungsdiagramm)
js implementiert einfachen Verifizierungscode
js realisiert den Countdown-Effekt des Klickens, um den Bestätigungscode zu erhalten
Drei Möglichkeiten zur Implementierung der JS-Verifizierungscodefunktion
Implementierung und technische Analyse des von js generierten Bestätigungscodes
js generiert den Verifizierungscode und beurteilt ihn direkt im Frontend
js + canvas realisiert die Funktion des Schiebepuzzle-Verifizierungscodes
JS erstellt den Implementierungscode für den Grafiküberprüfungscode
js implementiert die Login-Registrierungsbox zur Überprüfung der Mobiltelefonnummer und des Bestätigungscodes (Front-End-Teil)

<<: 10 zu wenig genutzte oder missverstandene HTML-Tags

>>: Hostübergreifende Kommunikation zwischen Docker-Containern - Overlay-basierte Implementierungsmethode

CSS3 zum Erzielen eines einfachen schwebenden Hintergrundeffekts mit weißen Wolken

JavaScript-Implementierung des Verifizierungscode-Falls

CSS3 zum Erzielen eines einfachen schwebenden Hintergrundeffekts mit weißen Wolken

Beispiel für eine gespeicherte MySQL-Prozedurmethode zum Zurückgeben mehrerer Werte

Erstellen einer .NET Core 2.0 + Nginx + Supervisor-Umgebung unter einem Centos7-System

Implementierung der Webpack-Codefragmentierung

Tutorial zur Konfiguration und Verwendung des MySQL-Protokolls für langsame Abfragen

Zehn Erfahrungen bei der Präsentation chinesischer Webinhalte

So installieren und ändern Sie das Anfangskennwort von mysql5.7.18 unter Centos7.3

HTML verwendet Canvas, um die Bullet-Screen-Funktion zu implementieren

Detaillierter Prozess der Installation von Logstash in Docker

So setzen Sie das Passwort zurück, wenn Sie es in MySQL8 vergessen haben (die alte MySQL-Methode funktioniert nicht)

Artikel empfehlen

CentOS 8-Installationsdiagramm (superdetailliertes Tutorial)

MySQL-Abfrage redundanter Indizes und ungenutzter Indexoperationen

mysql5.7.18.zip – Tutorial zur Konfiguration der installationsfreien Version (Windows)

Javascript implementiert die Webversion des Flipperspiels

Implementierungsbeispiel für Scan-Code-Zahlung im Vue-Projekt (mit Demo)

JS implementiert die Benutzerregistrierungsschnittstellenfunktion

Detaillierte Erläuterung des MySQL-Indexprinzips und der Abfrageoptimierung

Tutorial zum Erstellen einer VSCode+CMake+Clang+GCC-Umgebung unter Win10

So legen Sie die Anzahl der MySQL-Verbindungen fest und ermitteln sie

Detaillierte Erläuterung zur Konfiguration des Beispielcodes für den Nginx-Webserver

Einfaches Webdesign-Konzept – Farbabstimmung

Tutorial zum Erstellen einer Windows Server 2019 IIS10.0+PHP(FastCGI)+MySQL-Umgebung

Implementierungsmethode für die Datenspeicherung im WeChat-Applet

jQuery implementiert alle Auswahl- und umgekehrten Auswahloperationsfälle

xtrabackup MySQL-Datenbank sichern und wiederherstellen