基本用法:
- <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 地址:
来源: http://www.bubuko.com/infodetail-1861325.html