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

Perfect solution to Docker Alpine image time zone problem

Recently, when I was using Docker to deploy a Jav...

Analyzing Linux high-performance network IO and Reactor model

Table of contents 1. Introduction to basic concep...

Use Docker to build a Git image using the clone repository

Overview I have been using Docker for more than a...

How to implement MySQL bidirectional backup

MySQL bidirectional backup is also called master-...

JavaScript to switch multiple pictures

This article shares the specific code of JavaScri...

Vue virtual Dom to real Dom conversion

There is another tree structure Javascript object...

Detailed graphic tutorial on downloading and installing VirtualBox software and installing and deploying it in Linux environment

1. Download and install VirtualBox software First...

How to install and configure Docker nginx

Download Nginx image in Docker docker pull nginx ...

How to implement remote connection for Redis under Linux

After installing Redis on Linux, use Java to conn...

JS practical object-oriented snake game example

Table of contents think 1. Greedy Snake Effect Pi...

Introduction to vim plugin installation under Linux system

Table of contents Install vim plugin manager Add ...

How to use the name attribute and id attribute of the a tag to jump within the page

In the past, I only knew how to use the name attri...

Comprehensive website assessment solution

<br />Sometimes you may be asked questions l...

Detailed explanation of the practical use of HTML table layout

When is the table used? Nowadays, tables are gene...

How to implement MySQL master-slave replication based on Docker

Preface MySQL master-slave replication is the bas...