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
Erste Schritte mit der Konvertierung von Vue in React
Inhaltsverzeichnis Design Komponentenkommunikatio...
Führen Sie die Schritte zum Konfigurieren der IP-Adresse in Ubuntu 18.04 LTS aus
Vorwort Die Methode zum Konfigurieren von IP-Adre...
Eine kurze Analyse und Aufschlüsselung der Vor- und Nachteile von drei Baumstrukturtabellendesigns in MySQL
Inhaltsverzeichnis Einführung Frage Design 1: Adj...
Docker erstellt MySQL-Erklärung
1. MySQL-Image herunterladen Befehl: docker pull ...
Docker-Installationsmethode und detaillierte Erläuterung der vier Netzwerkmodi von Docker
1. Docker installieren yum -y install docker-io D...
CSS-Code zum Anordnen von Fotos in Moments
Zunächst können Sie Moments öffnen und mehrere La...
Lösen Sie das Installationsproblem der mysql8.0.19 Winx64-Version
MySQL ist ein kleines relationales Open-Source-Da...
Detaillierte Analyse des HTTP-Statuscodes 502 des Dienstes nginx+php-fpm
Bei einem unserer Webprojekte ist aufgrund der Zu...
So implementieren Sie HTML, um zu erkennen, ob die Eingabe abgeschlossen ist, und den nächsten Inhalt automatisch einzufügen
Im vorherigen Artikel haben wir die einfache Erke...
Müssen Designer das Programmieren lernen?
Oftmals wird nach der Fertigstellung eines Webdes...
Die Einhandregel von WEB 2.0
<br />Mein vorheriger Artikel über CSS wurde...
React-Internationalisierung react-i18next ausführliche Erklärung
Einführung react-i18next ist ein leistungsstarkes...
Schritte zur Verwendung von ORM zum Hinzufügen von Daten in MySQL
【Vorwort】 Wenn Sie ORM zum Bedienen von Daten in ...
Ich zeige Ihnen, wie Sie Schriftsymbole in CSS verwenden
Zunächst einmal: Was ist ein Schriftsymbol? Oberf...
So implementieren Sie das Builder-Muster in Javascript
Überblick Das Builder-Muster ist ein relativ einf...