【功能实现】qrcode生成二维码Demo
上官鸿祯
功能简介
通过qrcode.js生成二维码的简单实现功能，代码很简单，需要在html引入jquery.min.js和qrcode.min.js
demo下载地址
代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<script type="text/javascript" src="./qrcode/jquery.min.js"></script>
<script type="text/javascript" src="./qrcode/qrcode.min.js"></script>
<script src="./qrcode/setQrcode.js"></script>
<body>
<input type="text" id="qrcode-input" value="www.baidu.com"/>
<button onClick="makeCode()">测试按钮</button>
<div id="qrcode"></div>
</body>
<script>
makeCode()
</script>
</html>
js
function makeCode() {
// 需要生成二维码的字符串（可以为链接，可以为普通字符串，可以从外面传入）
var key = document.getElementById('qrcode-input').value
// 需要获取一个div实例，用于存放二维码
var div = document.getElementById('qrcode')
// 控制二维码的宽高(可拆分)
var qrcodeSize = 300
// 将这个div清空，防止重复生成
div.innerHTML = ''
var qrcode = new QRCode(div, {
width: qrcodeSize,
height: qrcodeSize
});
qrcode.makeCode(key);
}
效果图
效果图由于带有二维码无法展示，可以通过demo直接进行查看
类似资料：