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
 

 這樣就可以，線上生成二維碼了！

下圖就是我們的程式碼效果圖，試試用手機掃描下會不會跳轉到百度首頁。