码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-04-01 17:06:04      阅读:1007      评论:0      收藏:0      [点我收藏+]

标签:images   跳转   bsp   png   效果   orm   需要   qrcode   图片   

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

 这样就可以,在线生成二维码了!

下图就是我们的代码效果图,试试用手机扫描下会不会跳转到百度首页。

技术分享

 

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

标签:images   跳转   bsp   png   效果   orm   需要   qrcode   图片   

原文地址:http://www.cnblogs.com/7Ezreal/p/6656499.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!