JavaScript+html implementiert zufällige QR-Code-Verifizierung auf Frontend-Seiten

Teilen Sie die coole zufällige QR-Code-Verifizierung der Front-End-Seite als Referenz. Der spezifische Inhalt ist wie folgt

Direkt auf dem Code

<%@ Seite contentType="text/html;charset=UTF-8" Sprache="java" %>
<html>
<Kopf>
    <title>Titel</title>
    <!--Stellen Sie js von jQuery vor -->
    <script type="text/javascript" src="../jquery/jquery.js"></script>
</Kopf>
<Stil>
    .Eingabewert {
        Breite: 200px;
        Höhe: 32px;
        Rand: 1px durchgezogen #ddd;
        Box-Größe: Rahmenbox;
    }
    #Leinwand {
        vertikale Ausrichtung: Mitte;
        Box-Größe: Rahmenbox;
        Rand: 1px durchgezogen #ddd;
        Cursor: Zeiger;
    }
    .btn {
        Anzeige: Block;
        Rand oben: 20px;
        Höhe: 32px;
        Breite: 100px;
        Schriftgröße: 16px;
        Farbe: #fff;
        Hintergrundfarbe: #457adb;
        Rand: keiner;
        Rahmenradius: 50px;
    }
</Stil>
<Text>
<div Klasse="Code">
    <input type="text" value="" placeholder="Bitte geben Sie den Bestätigungscode ein (Groß-/Kleinschreibung nicht beachten)" class="put-val">
    <Leinwand-ID="Leinwand" Breite="100" Höhe="30"></Leinwand>
    <button class="btn">Senden</button>
</div>
</body>
<Skript>
    $(Funktion(){
        var show_num = [];
        zeichnen(show_num);

        $("#canvas").on('klicken',function(){
            zeichnen(show_num);
        })
        $(".btn").on('klicken',function(){
            var val = $(".input-val").val().toLowerCase();
            var num = show_num.join("");
            wenn(Wert==''){
                alert('Bitte geben Sie den Bestätigungscode ein!');
            }sonst wenn(Wert == Zahl){
                alert('Übermittlung erfolgreich!');
                $(".input-val").val('');
                // zeichnen(show_num);

            }anders{
                alert('Der Bestätigungscode ist falsch! Bitte erneut eingeben!');
                $(".input-val").val('');
                // zeichnen(show_num);
            }
        })
    })

    //Erstellen und Rendern des Bestätigungscodes Grafikfunktion draw(show_num) {
        var canvas_width=$('#canvas').width();
        var canvas_height=$('#canvas').height();
        var canvas = document.getElementById("canvas"); //Holen Sie sich das Canvas-Objekt, den Akteur var context = canvas.getContext("2d"); //Holen Sie sich die Canvas-Zeichenumgebung, die Leistungsphase des Akteurs canvas.width = canvas_width;
        Leinwandhöhe = Leinwandhöhe;
        var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        var aLength = aCode.length; //Länge des Arrays abrufen for (var i = 0; i < 4; i++) { //Die for-Schleife kann hier die Anzahl der Ziffern des Bestätigungscodes steuern (wenn Sie 6 Ziffern anzeigen möchten, ändern Sie einfach 4 in 6)
            var j = Math.floor(Math.random() * aLength); //Einen zufälligen Indexwert abrufen // var deg = Math.random() * 30 * Math.PI / 180; //Einen zufälligen Radiant zwischen 0 und 30 generieren var deg = Math.random() - 0.5; //Einen zufälligen Radiant generieren var txt = aCode[j]; //Einen zufälligen Inhalt abrufen show_num[i] = txt.toLowerCase();
            var x = 10 + i * 20; //x-Koordinate des Textes auf der Leinwandvar y = 20 + Math.random() * 8; //y-Koordinate des Textes auf der Leinwandcontext.font = "bold 23px Microsoft YaHei";

            Kontext.Übersetzen(x, y);
            Kontext.rotieren(Grad);

            Kontext.Füllstil = zufälligeFarbe();
            Kontext.Fülltext(txt, 0, 0);

            Kontext.rotieren(-Grad);
            Kontext.Übersetzen(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //Zeilen im Bestätigungscode anzeigen context.strokeStyle = randomColor();
            Kontext.beginPath();
            Kontext.VerschiebenNach(Math.random() * Leinwandbreite, Math.random() * Leinwandhöhe);
            Kontext.lineTo(Math.random() * Leinwandbreite, Math.random() * Leinwandhöhe);
            Kontext.Strich();
        }
        for (var i = 0; i <= 30; i++) { //Kleine Punkte auf dem Bestätigungscode anzeigen context.strokeStyle = randomColor();
            Kontext.beginPath();
            var x = Math.random() * Leinwandbreite;
            var y = Math.random() * Leinwandhöhe;
            Kontext.moveTo(x, y);
            Kontext.lineTo(x + 1, y + 1);
            Kontext.Strich();
        }
    }

    //Erhalte einen zufälligen Farbwert Funktion randomColor() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        gibt "rgb(" + r + "," + g + "," + b + ")" zurück;
    }

</Skript>
</html>

Die Wirkung ist wie folgt

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:

Eine kurze Diskussion über das Prinzip der Anmeldung durch Scannen von js-QR-Codes
Beispielcode zum Generieren eines QR-Codes mit js
Three.js-Beispielcode zum Erstellen dynamischer QR-Codes
Lösen Sie das Problem, dass qrcode.js beim Generieren eines QR-Codes ein leeres Div definieren muss
Implementierungscode zum Aufrufen der QR-Code-Scanfunktion von WeChat in js
JS realisiert die Funktion zum Scannen von QR-Codes mit Barcode-Scanner
So generieren Sie einen QR-Code mit einem Bild basierend auf nativem JavaScript
Drei Möglichkeiten zum Parsen von QR-Codes mit Javascript

<<: Detaillierte Erläuterung des Fehlerproblems beim Festlegen des Standardwerts 0000-00-00 in den Datums- und Datums-/Uhrzeittypen der MySQL-Datenbank

>>: Docker-Installation von MySQL (8 und 5.7)