前段時間項目中需要開發掃描二維碼查看信息的功能，在網上查了一些資料，把用過的方法進行總結需要導入一個qrcode的js 插件。
插件鏈接: qrcode.js下載地址，點擊即可下載
一、一個簡單的示例
如下：（僅供參考）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<%-- 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>輸入URL以生成二維碼</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="生成"> <p>生成的二維碼可以通過手機任意掃描工具，查看其二維碼信息</p> <br/></div><br><div id="qr_container" style="margin:auto; position:relative;"></div><script type="text/javascript"> //點擊生成按鈕以后 document.getElementById("qr_creat").onclick = function() { var qrcode = new QRCode( //實例化生成二維碼 document.getElementById("qr_container"), {//二維碼存放的div width: 160, //設置寬高 height: 160, } ); //根據input框的值生成二維碼 qrcode.makeCode($('#qr_link').val()); $("#qr_container").append("<br><br>"); //換行 }</script></body></html> |
代碼運行效果如下圖：
二、二個簡單的示例
第二個例子用到了layui的一些元素layui下載地址
引入layui.all.js和layui.css即可
scanQR.jsp如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %><!DOCTYPE html><html><head> <title>test1</title> <%--注意引用和地址--%> <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()">預覽</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 }); // 設置要生成二維碼的鏈接 new QRCode(document.getElementById("qrcode"), { text: 'https://blog.csdn.net/bug_producter/',//注意地址的修改 width: 250, height: 250 }); //預覽等彈出框 function skipHandle() { layer.open({ type: 1, title: "bug_producter的博客",//標題 area: ['400px', '400px'], content: $('#code').html(), }); }</script></body></html> |
運行效果如下：
這是博主剛剛生成的一個二維碼，掃描后會跳轉到博主的主頁，用手機瀏覽器，或者微信QQ…等等都可以掃描掃描，關鍵代碼就這一句 text: ‘https://blog.csdn.net/bug_producter/'
有興趣的小伙伴可以轉到，
手機訪問本地Tomcat服務器
在這篇文章的最后 重點 哪兒，也有關于二維碼的內容，會追加一個例子的文件
到此這篇關于js生成二維碼的示例代碼的文章就介紹到這了,更多相關js生成二維碼內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/bug_producter/article/details/114163534
