js生成二維碼的示例代碼

Posted on by

前段時間項目中需要開發掃描二維碼查看信息的功能，在網上查瞭一些資料，把用過的方法進行總結需要導入一個qrcode的js 插件。

插件鏈接: qrcode.js下載地址，點擊即可下載

一、一個簡單的示例

如下：（僅供參考）

<%--
 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如下：

<%@ 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生成二維碼內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：