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
Führen Sie die Schritte zum Konfigurieren einer statischen IP-Adresse für eine virtuelle Linux-Maschine aus
Vorwort In vielen Fällen werden wir virtuelle Mas...
Tomcat-Konfiguration und wie man ihn in Eclipse startet
Inhaltsverzeichnis So installieren und konfigurie...
Vue implementiert Mehrfachauswahl im unteren Popup-Fenster
In diesem Artikelbeispiel wird der spezifische Co...
JavaScript zum Erzielen des JD.com-Blitzverkaufseffekts
In diesem Artikel wird der spezifische JavaScript...
Bringen Sie Ihnen bei, wie Sie die rekursive Methode von MySQL8 verwenden
Ich habe zuvor einen Artikel über rekursive Abfra...
CSS imitiert Fernbedienungstasten
Hinweis: Diese Demo wurde in der Miniprogrammumge...
CSS implementiert die Bottom-Tapbar-Funktion
Viele Mobiltelefone verfügen mittlerweile über di...
MySQL 8.0.26-Installation und vereinfachtes Tutorial (das umfassendste im Internet)
Inhaltsverzeichnis 1. MySQL herunterladen 1.1 Her...
Eine kurze Diskussion über verschiedene Situationen, in denen das Hinzufügen von Indizes zu MySQL nicht wirksam wird
Das Hinzufügen von Indizes kann die Abfrageeffizi...
Detaillierte Erklärung zur Verwendung von Eslint in Vue
Inhaltsverzeichnis 1. Beschreibung 2. Laden Sie d...
Code zum Ausrichten von Kontrollkästchen und Radiotext im Formular
Ausrichtungsprobleme wie type="radio" un...
Verständnis für Webdesign-Layout
<br />Hier ergibt sich ein Widerspruch: In k...
Ubuntu 18.0.4 installiert MySQL und behebt FEHLER 1698 (28000): Zugriff für Benutzer ''root''@''localhost'' verweigert
Vorwort Ich habe vor Kurzem Linux gelernt und dan...
Erstellen eines sekundären Menüs mit JavaScript
In diesem Artikelbeispiel wird der spezifische Ja...
So erstellen Sie einen Git-Dienst basierend auf dem HTTP-Protokoll auf VMware+CentOS 8
Inhaltsverzeichnis 1. Ursache 2. Geräteinformatio...