js生成二维码

Z时代
2024-01-10
分类：技术分享

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 =newQRCode(//实例化生成二维码
document.getElementById("qr_container"),{//二维码存放的div
width:160,//设置宽高
height:160,
}
);
//根据input框的值生成二维码
qrcode.makeCode($('#qr_link').val());
$("#qr_container").append("<br><br>");//换行
}
</script>
</body>
</html>