前段時間項目中需要開發(fā)掃描二維碼查看信息的功能，在網(wǎng)上查了一些資料，把用過的方法進行總結(jié)需要導入一個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, //設(shè)置寬高 height: 160, } ); //根據(jù)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 }); // 設(shè)置要生成二維碼的鏈接 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> |
運行效果如下：
這是博主剛剛生成的一個二維碼，掃描后會跳轉(zhuǎn)到博主的主頁，用手機瀏覽器，或者微信QQ…等等都可以掃描掃描，關(guān)鍵代碼就這一句 text: ‘https://blog.csdn.net/bug_producter/'
有興趣的小伙伴可以轉(zhuǎn)到，
手機訪問本地Tomcat服務(wù)器
在這篇文章的最后 重點 哪兒，也有關(guān)于二維碼的內(nèi)容，會追加一個例子的文件
到此這篇關(guān)于js生成二維碼的示例代碼的文章就介紹到這了,更多相關(guān)js生成二維碼內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/bug_producter/article/details/114163534
