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"), {
 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

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

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

时间: 2024-10-13 14:28:22

h5开发app之在线生成二维码的相关文章

PHP在线生成二维码代码(google api)的例子

通过google在线生成二维码的api在线生成二维码. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &l

jquery-qrcode在线生成二维码

通过bower进行获取: [email protected]:ydkt$ bower install jquery-qrcode --save bower not-cached git://github.com/gcusnieux/jquery-qrcode.git#* bower resolve git://github.com/gcusnieux/jquery-qrcode.git#* bower checkout jquery-qrcode#master bower resolved gi

Asp.Net Core在线生成二维码

前言: 原先用zxing Code写过基于Winfrom的批量生成二维码工具,以及单个生成二维码工具:批量生成二维码Gihub源代码 今天尝试用QRCoder 加 Asp.Net Core 写了一个在线生成二维码的例子,并且保存图片到Ubuntu系统: 代码: 生成二维码所需要用到的包:QRCoder 根据Github上的源代码,引用NuGet包 PM> Install-Package QRCoder 根据传入的参数,生成二维码,并且保存图片 public static void QRCode(

java、python、golang等开发语言如何快速生成二维码?

免费二维码生成途径非常多!比如比较有名的草料二维码,如果只是简单的使用,用它就足够了.但是如果想大规模的生成,那就不太合适了.再者很多工具都没办法在二维码中加入logo(像微信二维码一样). 接下来,我就说说如何快速的.高质量的生成一个可高度定制的二维码. 二维码的编码算法是公开的,这就意味着大部分的开发语言都可以动图生成.但是在二维码应用如此广泛的今天,还自己去造轮子,如果不是傻,那就是正真的技术极客了. Java有开源的二维码生成库:com.google.zxing,这是谷歌大佬为andro

在线生成二维码的API接口

现在很多大网站都有这样的一个功能,使用手机扫描一下网页上的二维码便可快速在手机上访问网站.想要实现这样的功能其实很简单,下面麦布分享几个在线生成网址二维码的API接口.都是采用http协议接口,无需下载安装什么软件,可简单方便地引用,这才是最简单.最便捷的免费网址二维码生成工具. 在线生成网址二维码的API接口: 1.http://pan.baidu.com/share/qrcode?w=150&h=150&url=http://www.yhrc8.com 2.http://b.bshar

通过jquery-qrcode在线生成二维码

随着移动互联网的发展,二维码现在应用得越来越广泛了,随手扫扫就可以浏览网站.加个好友什么的,比起手工输入真的是方便太多了. 前期做了一个综合测评系统,考虑逐步实现移动化,一长串的IP地址用户输入也不方便,借助二维码的话,用户拿起手机扫扫就可以直接进入系统. 基于这个应用场景,就上网研究下了网站二维码的实现方式,归纳起来有以下两种: 1.借助一些二维码生成网站或者二维码生成器生成二维码图片,然后挂在网站上,如码云 QR-Code (二维码) 在线生成器 优点:开发成本为零,能够快速实现多样化的二维

微信公众号在线生成二维码带参数怎么搞?

带参数二维码是微信公众号渠道二维码的一种实现 微信的带参数二维码有两种,一种是临时二维码,一种是永久二维码,但是永久二维码的生成是有个数限制的,微号帮功能实现生成二维码海报.渠道二维码生成,确保公众号在合适的场景使用合适的功能 渠道二维码功能 推广员二维码 推广员二维码生成后 海报二维码功能 海报二维码效果数据 海报二维码推广员(即参加海报二维码推广的人) 用户通过二维码进入,自动回复信息支持文字.图片.单图文.小程序等信息格式,图文信息可以指向任意URL:推送给用户,实时监控到二维码来源的所有

.NET开发微信小程序-生成二维码

1.生成小程序二维码功能 直接请求相应的链接.传递相应的参数 以生成商铺的付款码为例: var shopsId = e.ShopsId //付款码的参数 var codeModel = new function () { } codeModel.path = "pages/PageWxPay/PageWxPay?shopsId=" + shopsId codeModel.width = 430 codeModel.auto_color = false codeModel.line_co

js在线生成二维码

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>预览</title><script src="/js/jquery.min.js"></script><script src="/js/jquery.qrcode.min.js"><