Sample code for generating QR code using js

Sample code for generating QR code using js

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 example

As 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:

insert image description here

2. Two simple examples

The second example uses some elements of layui. Download the layui link and import layui.all.js and layui.css.

insert image description here

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:

insert image description here
insert image description here

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:
  • JavaScript+html implements random QR code verification on front-end pages
  • A brief discussion on the principle of js QR code scanning login
  • Three.js sample code for making dynamic QR codes
  • Solve the problem that qrcode.js must define an empty div when generating a QR code
  • Implementation code for calling WeChat's QR code scanning function in js
  • JS realizes the function of scanning QR code with barcode scanner
  • How to generate a QR code with an image based on native javascript
  • Three ways to parse QR codes using javascript

<<:  MySQL compression usage scenarios and solutions

>>:  Docker realizes the connection with the same IP network segment

Recommend

Detailed explanation of how to quickly build a blog website using Docker

Table of contents 1. Preparation 2. Deployment Pr...

W3C Tutorial (8): W3C XML Schema Activities

XML Schema is an XML-based alternative to DTD. XM...

How to quickly deploy Gitlab using Docker

1. Download the gitlab image docker pull gitlab/g...

Nginx configuration to achieve multiple server load balancing

Nginx load balancing server: IP: 192.168.0.4 (Ngi...

vue element el-transfer adds drag function

The Core Asset Management Project requires el-tra...

Summary of MySQL slow log practice

Slow log query function The main function of slow...

TypeScript problem with iterating over object properties

Table of contents 1. Problem 2. Solution 1. Decla...

How to set static IP in centOS7 NET mode

Preface NAT forwarding: Simply put, NAT is the us...

Solution to the welcome to emergency mode message when booting CentOS7.4

Today I used a virtual machine to do an experimen...

Detailed steps to install mysql 8.0.18-winx64 on win10

1. First go to the official website to download t...

How to run MySQL using docker-compose

Directory Structure . │ .env │ docker-compose.yml...

How to automatically deploy Linux system using PXE

Table of contents Background Configuring DHCP Edi...