h5开发app之在线生成二维码

古人学问无遗力,少壮工夫老始成。这篇文章主要讲述h5开发app之在线生成二维码相关的知识,希望能为你提供帮助。
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代码:
1 var qrcode = new QRCode(document.getElementById("qrcode"), { 2width : 100, 3height : 100 4 }); 5 6 function makeCode () { 7var elText = document.getElementById("text"); 8 9if (!elText.value) { 10alert("Input a text"); 11elText.focus(); 12return; 13} 14 15qrcode.makeCode(elText.value); 16 } 17 18 makeCode(); 19 20 $("#text"). 21on("blur", function () { 22makeCode(); 23}). 24on("keydown", function (e) { 25if (e.keyCode == 13) { 26makeCode(); 27} 28}); 29 < /script

  这样就可以,在线生成二维码了!
下图就是我们的代码效果图,试试用手机扫描下会不会跳转到百度首页。
h5开发app之在线生成二维码

文章图片

【h5开发app之在线生成二维码】 

    推荐阅读