JavaScript + HTML zur Implementierung der Sliding-Verifizierung für Front-End-Seiten

In diesem Artikel wird der spezifische Code von JavaScript + HTML zur Implementierung der Front-End-Seiten-Verschiebungsüberprüfung zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Teilen Sie die coole Frontend-Seiten-Verifizierung per Schieberegler

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.s202166112952045troke();
        }
    }

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

Das Problem und die Lösung bei der Verwendung des Vue-Scroller-Seiteneingabefelds, das kein Gleiten auslöst
Vue implementiert Links- und Rechts-Links-Sliding-Seiten basierend auf Better-Scroll
Vue implementiert den Seitenwechsel-Schiebeeffekt
So verwenden Sie Ihre Finger zum Gleiten zwischen Vue-Routingseiten
Implementierung des Links- und Rechtsschiebeeffekts beim Seitenwechsel basierend auf Vue
JavaScript+html zur Implementierung der Sliding-Verifizierung auf Front-End-Seiten (2)
JavaScript ermittelt die Position der Bildlaufleiste und verschiebt die Seite zum Ankerpunkt
js, um ein Gleiten zum unteren Seitenende zu erreichen und automatisch weitere Funktionen zu laden
js/jquery-Steuerseite dynamisches Laden von Daten gleitende Bildlaufleiste automatische Ladeereignismethode
Vue/js realisiert den Effekt des automatischen Seiten-Hochschiebens

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

>>: Lösen Sie das Problem beim Einstellen des Datums auf 0000-00-00 00:00:00 in MySQL 8.0.13