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

How webpack implements static resource caching

After installing MySQL, the root account prompt appears when logging in. mysql ERROR 1045 (28000): Access denied for use solution

After installing MySQL, you will find that the ro...

Sample code for generating QR code using js

1. A simple example

2. Two simple examples

How webpack implements static resource caching

Eight ways to implement communication in Vue

Use of TypeScript Generics

Detailed explanation of JavaScript axios installation and packaging case

Vue Learning - VueRouter Routing Basics

Installation steps of mysql under linux

How to build svn server in linux

Summary of several situations in which MySQL indexes fail

MySQL 5.6.36 Windows x64 version installation tutorial detailed

A summary of some of the places where I spent time on TypeScript

Recommend

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

W3C Tutorial (8): W3C XML Schema Activities

How to quickly deploy Gitlab using Docker

After installing MySQL, the root account prompt appears when logging in. mysql ERROR 1045 (28000): Access denied for use solution

Nginx configuration to achieve multiple server load balancing

Solve the problem of running node process in Linux system but unable to kill the process

vue element el-transfer adds drag function

Summary of MySQL slow log practice

TypeScript problem with iterating over object properties

How to set static IP in centOS7 NET mode

Solution to primary key conflict when innodb_index_stats reports an error when importing backup data

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

Detailed steps to install mysql 8.0.18-winx64 on win10

How to run MySQL using docker-compose

How to automatically deploy Linux system using PXE