h5開發app之在線生成二維碼

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代碼：

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

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

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