Some time ago, the project needed to develop the function of scanning QR codes to view information. I checked some information on the Internet and summarized the methods used. You need to import a qrcode js plug-in. Plugin link: qrcode.js download address, click to download 1. A simple exampleAs follows: (for reference only) <%-- Created by IntelliJ IDEA. User: ASUS author:xumz Date: 2021/2/27 Time: 10:33 To change this template use File | Settings | File Templates. --%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <html> <head> <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> </head> <body> <h1>Enter the URL to generate a QR code</h1> <div> <label for="qr_link">URL:</label> <input id="qr_link" type="text" value="hello er wei ma !!" style="width:460px;"/> <input type="button" id="qr_creat" value="Generate"> <p>The generated QR code can be scanned by any mobile phone tool to view its QR code information</p> <br/> </div> <br> <div id="qr_container" style="margin:auto; position:relative;"></div> <script type="text/javascript"> //After clicking the generate button document.getElementById("qr_creat").onclick = function() { var qrcode = new QRCode( //Instantiate and generate QR code document.getElementById("qr_container"), { //The div where the QR code is stored width: 160, //Set width and height height: 160, } ); //Generate a QR code based on the value of the input boxqrcode.makeCode($('#qr_link').val()); $("#qr_container").append("<br><br>"); //line break} </script> </body> </html> The code running effect is as follows: 2. Two simple examplesThe second example uses some elements of layui. Download the layui link and import layui.all.js and layui.css. scanQR.jsp is as follows: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head> <title>test1</title> <%--Note the reference and address--%> <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="external nofollow" /> </head> <body> <div align="center"> <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="skipHandle()">Preview</button> </div> <div id="code" style="display: none;"> <div id="qrcode" style="margin-left: 75px;margin-top: 20px"></div> </div> <script> layui.use(['layer'], function () { var layer = layui.layer }); // Set the link to generate the QR code new QRCode(document.getElementById("qrcode"), { text: 'https://blog.csdn.net/bug_producter/', //Note the modification of the address width: 250, height: 250 }); //Preview pop-up box function skipHandle() { layer.open({ type: 1, title: "bug_producter's blog", //Title area: ['400px', '400px'], content: $('#code').html(), }); } </script> </body> </html> The operation effect is as follows: This is a QR code that the blogger just generated. After scanning, you will be redirected to the blogger's homepage. You can scan it with a mobile browser, WeChat, QQ, etc. The key code is this text: 'https://blog.csdn.net/bug_producter/' Interested friends can go to, Mobile phone access to local Tomcat server At the end of this article, there is also content about QR codes, and an example file will be added. This is the end of this article about the sample code of generating QR code with js. For more relevant content about generating QR code with js, please search the previous articles of 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: MySQL compression usage scenarios and solutions
>>: Docker realizes the connection with the same IP network segment
Table of contents 1. Preparation 2. Deployment Pr...
XML Schema is an XML-based alternative to DTD. XM...
1. Download the gitlab image docker pull gitlab/g...
After installing MySQL, you will find that the ro...
Nginx load balancing server: IP: 192.168.0.4 (Ngi...
Let me first introduce to you that the node proce...
The Core Asset Management Project requires el-tra...
Slow log query function The main function of slow...
Table of contents 1. Problem 2. Solution 1. Decla...
Preface NAT forwarding: Simply put, NAT is the us...
Fault description percona5.6, mysqldump full back...
Today I used a virtual machine to do an experimen...
1. First go to the official website to download t...
Directory Structure . │ .env │ docker-compose.yml...
Table of contents Background Configuring DHCP Edi...