Beispielcode zum Generieren eines QR-Codes mit js
|
Vor einiger Zeit musste das Projekt die Funktion zum Scannen von QR-Codes zum Anzeigen von Informationen entwickeln. Ich habe einige Informationen im Internet überprüft und die verwendeten Methoden zusammengefasst. Sie müssen ein QRCode-JS-Plug-In importieren. Plugin-Link: qrcode.js Download-Adresse, klicken Sie zum Herunterladen 1. Ein einfaches BeispielWie folgt: (nur als Referenz)
<%--
Erstellt von IntelliJ IDEA.
Benutzer: ASUS
Autor: xumz
Datum: 27.02.2021
Zeit: 10:33
Um diese Vorlage zu ändern, verwenden Sie Datei | Einstellungen | Dateivorlagen.
--%>
<%@ Seitensprache="java" Inhaltstyp="text/html; Zeichensatz=UTF-8" Seitenkodierung="UTF-8" %>
<html>
<Kopf>
<script charset='utf-8' type='text/javascript' src='js/jquery-1.11.0.js'></script>
<script src="js/qrcode.min.js" type="text/javascript"></script>
</Kopf>
<Text>
<h1>Geben Sie die URL ein, um einen QR-Code zu generieren</h1>
<div>
<label für="qr_link">URL:</label>
<input id="qr_link" type="text" value="hallo, hier ist meine frau !!" style="width:460px;"/>
<input type="button" id="qr_creat" value="Generieren">
<p>Der generierte QR-Code kann mit jedem Mobiltelefon-Tool gescannt werden, um seine QR-Code-Informationen anzuzeigen</p>
<br/>
</div>
<br>
<div id="qr_container" style="margin:auto; position:relative;"></div>
<Skripttyp="text/javascript">
//Nach dem Klicken auf die Schaltfläche „Generieren“ document.getElementById("qr_creat").onclick = function() {
var qrcode = new QRCode( //QR-Code instanziieren und generieren document.getElementById("qr_container"), { //Das div, in dem der QR-Code gespeichert ist
width: 160, //Breite und Höhe festlegen height: 160,
}
);
//Generieren Sie einen QR-Code basierend auf dem Wert des Eingabefelds qrcode.makeCode($('#qr_link').val());
$("#qr_container").append("<br><br>"); //Zeilenumbruch}
</Skript>
</body>
</html>Der Effekt der Codeausführung ist wie folgt:
2. Zwei einfache BeispieleDas zweite Beispiel verwendet einige Elemente von layui. Laden Sie den layui-Link herunter und importieren Sie layui.all.js und layui.css.
scanQR.jsp lautet wie folgt:
<%@ Seitensprache="java" Inhaltstyp="text/html; Zeichensatz=UTF-8" Seitenkodierung="UTF-8" %>
<!DOCTYPE html>
<html>
<Kopf>
<Titel>Test1</Titel>
<%--Notieren Sie sich die Referenz und Adresse--%>
<script src="js/qrcode.min.js"></script>
<script src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/layui/layui.all.js"></script>
<link type="text/css" rel="styleSheet" href="js/layui/css/layui.css" rel="externes nofollow" />
</Kopf>
<Text>
<div ausrichten="zentrieren">
<button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="skipHandle()">Vorschau</button>
</div>
<div id="Code" style="Anzeige: keine;">
<div id="qrcode" style="margin-left: 75px;margin-top: 20px"></div>
</div>
<Skript>
layui.use(['Ebene'], Funktion () {
var layer = layui.layer
});
// Setzen Sie den Link zum Generieren des QR-Codes new QRCode(document.getElementById("qrcode"), {
Text: 'https://blog.csdn.net/bug_producter/', //Beachten Sie die Änderung der Adressbreite: 250,
Höhe: 250
});
//Popup-Fenster in der Vorschau anzeigen Funktion skipHandle() {
Schicht.öffnen({
Typ: 1,
Titel: "bug_producter's Blog", //Titelbereich: ['400px', '400px'],
Inhalt: $('#code').html(),
});
}
</Skript>
</body>
</html>Der Operationseffekt ist wie folgt:
Dies ist ein QR-Code, den der Blogger gerade generiert hat. Nach dem Scannen werden Sie zur Homepage des Bloggers weitergeleitet. Sie können ihn mit einem mobilen Browser, WeChat, QQ usw. scannen. Der Schlüsselcode ist dieser Text: „https://blog.csdn.net/bug_producter/“ Interessierte Freunde können sich an Mobiltelefonzugriff auf lokalen Tomcat-Server Am Ende dieses Artikels gibt es auch Inhalte zu QR-Codes und eine Beispieldatei wird hinzugefügt. Dies ist das Ende dieses Artikels über den Beispielcode zum Generieren von QR-Codes mit js. Weitere relevante Inhalte zum Generieren von QR-Codes mit js finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Anwendungsszenarien und Lösungen für die MySQL-Komprimierung
>>: Docker realisiert die Verbindung mit demselben IP-Netzwerksegment
Artikel empfehlen
Vue implementiert die Funktion zum Aufrufen der Handykamera und des Albums
In diesem Artikel wird der spezifische Code von V...
HTML-Auszeichnungssprache - Referenz
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
Eine kurze Erläuterung der Unterschiede zwischen FTP, FTPS und SFTP
Inhaltsverzeichnis Einführung in FTP, FTPS und SF...
Konfigurationsschritte für die MySQL-Gruppenreplikation (empfohlen)
MySQL-Group-Replication ist eine neue Funktion, d...
CSS zum Erzielen von Text auf dem Hintergrundbild
Wirkung: <div Klasse="imgs"> <...
So verwenden Sie die Verlaufsumleitung in React Router
In react-router kann der Sprung in der Komponente...
Beispielanalyse von gespeicherten MySQL-Prozeduren, die Fehlerbedingungen in gespeicherten Prozeduren auslösen (SIGNAL- und RESIGNAL-Anweisungen)
Dieser Artikel veranschaulicht anhand von Beispie...
Reines CSS zur Realisierung der Platzhalteranimation und Eingabeüberprüfung für Eingabefelder
Weitere spannende Inhalte finden Sie unter https:...
Einführung in das Linux-Netzwerksystem
Inhaltsverzeichnis Netzwerk Informationen Ändern ...
JS Canvas realisiert die Funktionen von Zeichenbrett und Signaturtafel
In diesem Artikel wird der spezifische Code von J...
Erste Erkundung gängiger Befehle für Docker-Anfänger
Bevor wir Docker offiziell verwenden, machen wir ...
CSS, um in wenigen Schritten visuelle Effekte im Stil von Cyberpunk 2077 zu erzielen
Hintergrund Bevor wir mit dem Artikel beginnen, w...
Beispielerklärung für langsame MySQL-Abfragen und -Protokolle
1. Einleitung Durch Aktivieren des Slow Query Log...
jQuery realisiert dynamische Partikeleffekte
In diesem Artikel wird der spezifische Code von j...
js zur Realisierung der automatischen Sperrbildschirmfunktion
1. Anwendungsszenarien Es gibt eine solche Anford...