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

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

Detailed tutorial on setting up multiple instances of MySQL 8 on CentOS 7 (you can have as many as you want)

Sample code for generating QR code using js

1. A simple example

2. Two simple examples

Detailed tutorial on setting up multiple instances of MySQL 8 on CentOS 7 (you can have as many as you want)

Detailed explanation of Vue's custom event content distribution

Summary of Docker common commands and tips

Introduction to the use and difference between in and exists in MySQL

Detailed explanation of tcpdump command examples in Linux

An article to understand the creation, uploading, pulling and deployment of Docker images

How to use html2canvas to convert HTML code into images

MySQL full-text search usage examples

Detailed steps to install mysql 8.0.18-winx64 on win10

Angular performance optimization: third-party components and lazy loading technology

Recommend

How to deal with the xfs_vm_releasepage warning problem reported by the Linux system

Vue implements the product tab of the product details page function

Summary of various methods for Vue to achieve dynamic styles

MySQL 8.0.13 installation and configuration method graphic tutorial under Windows 64 bit

Detailed explanation of Nginx status monitoring and log analysis

HTML form and the use of form internal tags

Linux server configuration IP whitelist to prevent remote login and port exposure

React Native scaffolding basic usage detailed explanation

Vue+thinkphp5.1+axios to realize file upload

How to optimize logic judgment code in JavaScript

How to insert video into HTML and make it compatible with all browsers

Detailed steps for developing Java payment interface for Alipay

SVG button example code based on CSS animation

Summary of Linux environment variable configuration methods (differences between .bash_profile and .bashrc)

JavaScript to achieve uniform animation effect