GitHub 地址:https://github.com/davidshimjs/qrcodejs
引用:
<script src="/qrcode.js"></script>
基本用法:
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "https://www.tianlunvip.com");
</script>
选项设置:
var qrcode = new QRCode("test", {
text: "https://www.tianlunvip.com",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
方法:
qrcode.clear(); // 清除.
qrcode.makeCode("https://tianlunvip.com"); // 重新生成.
HTML 代码:
<input id="text" type="text" value="https://tianlunvip.com" style="width:80%" /><br />
<div id="qrcode"></div>
CSS 代码:
#qrcode {
width:160px;
height:160px;
margin-top:15px;
}
JS 代码:
var qrcode = new QRCode("qrcode");
function makeCode () {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
See the Pen
YzzYJJN by tianlunvip (@tianlunvip)
on CodePen.
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>