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:
|
>>: Docker-Installation von MySQL (8 und 5.7)
Artikel empfehlen
So verwenden Sie die Zusatzfunktionen von Vuex
Inhaltsverzeichnis Kartenstaat Kartengetter Karte...
Lösen Sie das Problem, dass Sie auf dem Linux-Server nicht auf die RabbitMQ-Verwaltungsseite zugreifen können
Da eine bestimmte Funktion meines Projekts erford...
MySQL SHOW PROCESSLIST unterstützt den gesamten Prozess der Fehlerbehebung
1. SHOW PROCESSLIST-Befehl SHOW PROCESSLIST zeigt...
Natives JavaScript zur Implementierung einer zufälligen Namensaufruftabelle
In diesem Artikelbeispiel wird der spezifische Co...
Implementierung von TypeScript im React-Projekt
Inhaltsverzeichnis 1. Einleitung 2. Nutzung Zusta...
Führen Sie die Schritte zum Einrichten automatischer Updates in CentOS 8 aus
Das Beste, was Sie für Ihre Daten und Computer tu...
Untersuchung des Wertes des Positionsattributs in CSS (Zusammenfassung)
Das CSS-Positionsattribut gibt den Positionierung...
So installieren Sie Jenkins mit Docker
Inhaltsverzeichnis 1. Ziehen Sie das Bild 2. Erst...
Eine kurze Erläuterung, warum Daemon Off beim Ausführen von Nginx in Docker verwendet wird
Ich bin sehr glücklich. Wenn ich auf dieses Probl...
Websocket+Vuex implementiert eine Echtzeit-Chat-Software
Inhaltsverzeichnis Vorwort 1. Der Effekt ist wie ...
MP3- oder Flashplayer-Code auf der Webseite abspielen
Code kopieren Der Code lautet wie folgt: <Obje...
25 Beispiele für die Verwendung kreisförmiger Elemente im Webdesign
Heute listet dieser Beitrag einige großartige Beis...
Beste Möglichkeit, den Schlüssel im JSON-Objekt zu ersetzen
JSON (JavaScript Object Notation, JS Object Notat...
Eine kurze Erläuterung zur Verwendung von Slots in Vue
Definition und Verwendung: Verwenden Sie die Slot...
Detaillierte Erläuterung des Anwendungsbeispiels für den JQuery-Tag-Selektor
In diesem Artikelbeispiel wird der spezifische Co...