h5通过jquery和qrcode在线生成二维码
首先我们需要下载一个qrcode.js文件,然后依次引入jquery和qrcode文件。
1、创建一个输入框以便做演示使用:
<input id="text" type="text" value="http://www.baidu.com" style="width:80%" />
2、创建一个div以用来放置二维码图片(div的id定义为“qrcode”):
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
3、插入js代码:
1 var qrcode = new QRCode(document.getElementById("qrcode"), {
2 width : 100,
3 height : 100
4 });
5
6 function makeCode () {
7 var elText = document.getElementById("text");
8
9 if (!elText.value) {
10 alert("Input a text");
11 elText.focus();
12 return;
13 }
14
15 qrcode.makeCode(elText.value);
16 }
17
18 makeCode();
19
20 $("#text").
21 on("blur", function () {
22 makeCode();
23 }).
24 on("keydown", function (e) {
25 if (e.keyCode == 13) {
26 makeCode();
27 }
28 });
29 </script
这样就可以,在线生成二维码了!
下图就是我们的代码效果图,试试用手机扫描下会不会跳转到百度首页。