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

Sample code for achieving three-dimensional picture placement effect with pure CSS

1. Percentage basis for element width/height/padd...

Vant Uploader implements the component of uploading one or more pictures

This article shares the Vant Uploader component f...

MySQL implements increasing or decreasing the specified time interval for all times in the current data table (recommended)

The DATE_ADD() function adds a specified time int...

Start a local Kubernetes environment using kind and Docker

introduce Have you ever spent a whole day trying ...

Detailed explanation of the implementation process of Nginx log timing splitting in CentOS 7

1. Write a split script (splitNginxLog.sh) * Beca...

js implements mouse in and out card switching content

This article shares the specific code of js to re...

4 ways to achieve a two-column layout with fixed left column and adaptive right column using CSS

1. float+overflow:hidden This method mainly trigg...

How to find and delete duplicate records in MySQL

Hello everyone, I am Tony, a teacher who only tal...

Detailed explanation of Mysql logical architecture

1. Overall architecture diagram Compared to other...

Detailed instructions for installing SuPHP on CentOS 7.2

By default, PHP on CentOS 7 runs as apache or nob...

js realizes 3D sound effects through audioContext

This article shares the specific code of js to ac...

Optimize the storage efficiency of BLOB and TEXT columns in InnoDB tables

First, let's introduce a few key points about...

Solve the problem of not being able to enter breakpoints when using GDB in Docker

question Running gdb in docker, hitting a breakpo...

Installing Docker Desktop reports an error message: WSL 2 installation is incomplete (Solve the error message)

Error description When we install Docker Desktop,...

CSS text alignment implementation code

When making forms, we often encounter the situati...