欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

QRCode.js -- 用 Javascript 生产二维码

发布时间：2025/5/22 232 豆豆
生活随笔 收集整理的这篇文章主要介绍了 QRCode.js -- 用 Javascript 生产二维码 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

QRCode.js是一个生成二维码的JS库。QRCode.js支持在DOM中使用跨浏览器Canvas和table标签的。 QRCode.js不依赖其他JS库。


基本用法：

<div id="qrcode"></div> <script type="text/javascript"> new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie"); </script>


还可以添加其它选项：

<div id="qrcode"></div> <script type="text/javascript"> var qrcode = new QRCode(document.getElementById("qrcode"), {text: "http://jindo.dev.naver.com/collie",width: 128,height: 128,colorDark : "#000000",colorLight : "#ffffff",correctLevel : QRCode.CorrectLevel.H }); </script>


也可以使用一些方法：

qrcode.clear(); // 清除二维码 qrcode.makeCode("http://naver.com"); // 生成一个新的二维码


浏览器兼容性：

IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile 等等



案例演示：

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /><title></title> </head> <body><input id="text" type="text" value="http://dapengtalk.blog.51cto.com" style="width:80%" /><br /> <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div><script src="js/jquery-1.8.3.min.js"></script> <script src="js/qrcode.js"></script> <script>var qrcode = new QRCode(document.getElementById("qrcode"), {width : 100,height : 100});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();}});</script> </body> </html>


页面截图：


扫描二维码：



Github 地址：https://github.com/davidshimjs/qrcodejs



转载于:https://blog.51cto.com/dapengtalk/1879568

总结

以上是生活随笔为你收集整理的QRCode.js -- 用 Javascript 生产二维码的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。