js生成二維碼
- 一、一個簡單的示例
前段時間專案中需要開發掃描二維碼查看資訊的功能，在網上查了一些資料，把用過的方法進行總結需要匯入一個qrcode的js 插件，
插件鏈接: qrcode.js下載地址，點擊即可下載，不需C幣.
一、一個簡單的示例
如下：（僅供參考）
<%--
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>
代碼運行效果如下圖：
有興趣的小伙伴可以轉到，
手機訪問本地Tomcat服務器
在這篇文章的最后 重點 哪兒，也有關于二維碼的內容，會追加一個例子的檔案
創作不易，如果這篇文章能夠幫助到你，希望能關注或收藏一下博主，如果文章內容有問題也可留言討論，我們一起學習，一起進步！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/264502.html
標籤：其他