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:
|
<<: 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
Artikel empfehlen
Beispiel zum Einrichten eines Linux-Systems zur automatischen Ausführung eines Skripts beim Start
Vorwort Hallo zusammen, ich bin Liang Xu. Bei der...
Lösung für das Problem, dass Docker-Container nicht gestoppt oder beendet werden können
Docker-Version 1.13.1 Problemprozess Ein MySQL-Co...
MySQL-Abfrage-Cache und Pufferpool
1. Caches - Abfrage-Cache Die folgende Abbildung ...
Detaillierte Erläuterung der grundlegenden Verwaltung der KVM-Virtualisierung in CentOS7
1. Installieren Sie die KVM-Virtualisierung :::::...
Javascript implementiert einfache Navigationsleiste
In diesem Artikel wird der spezifische Code von J...
Schritte zum Erstellen Ihres eigenen YUM-Repositorys
Einfach ausgedrückt lautet die IP der als Lager v...
So verhindern Sie, dass Website-Inhalte in Suchmaschinen aufgenommen werden
Normalerweise besteht das Ziel beim Erstellen ein...
Detaillierte Erklärung des Parsererror-Fehlerfalls in der JavaScript-Lösung in Ajax
Die ultimative Methode zur Lösung des Ajax-Parser...
Einen Web-Rechner mit Javascript schreiben
Dieser Artikel beschreibt hauptsächlich die Auswi...
MySQL-Grundlagen-Tutorial Teil 1 MySQL5.7.18 Installations- und Verbindungs-Tutorial
Ausgehend von diesem Artikel dient eine neue Arti...
Die 10 wichtigsten zeitsparenden Tipps zur Verkürzung der Web-App-Entwicklung (grafisches Tutorial)
In der heutigen Entwicklungsumgebung ist schnell ...
Vue3 kapselt die Textskelett-Effektkomponente der Seitennavigation
Vue3-Projektkapselung Seitennavigation Textskelet...
So stellen Sie per SSH eine Verbindung zum Docker-Server her
Als ich zum ersten Mal mit Docker in Berührung ka...
Erste Schritte mit dem Alibaba Cloud ECS-Server (unbedingt zu lesendes Tutorial für Neulinge)
1. Alibaba Cloud wählt den geeigneten Cloud-Serve...
Detaillierter Prozess der SpringBoot-Integration von Docker
Inhaltsverzeichnis 1. Demo-Projekt 1.1 Schnittste...