原文链接:http://www.yxxrui.cn/article/65.shtml

没时间或者懒得看的,可以直接看加粗部分(或试试手感▼)。

使用jquery.qrcode来生成二维码,qrcode基于JQuery,所以使用之前必须先引用JQuery。Qrcode的最新代码地址:https://github.com/jeromeetienne/jquery-qrcode

1、先添加引用

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

2、添加存放容器

需要在页面上设置需要显示的地方,用来存放二维码,比如

<div id=“erweima”></div>

3、开始调用

$(‘#erweima’).qrcode('http://www.yxxrui.cn'); //要生成的字符串

4、大功告成

====================优雅的分割线======================

方法原型:

$(selector).qrcode(options);

其中参数options详细设置方法如下:

(试了试,似乎没啥用▼)

{
// render method: 'canvas', 'table'
render: 'canvas',
// version range somewhere in 1 .. 40
minVersion: 1,
maxVersion: 40,
// error correction level: 'L', 'M', 'Q' or 'H'
ecLevel: 'L', // offset in pixel if drawn onto existing canvas
left: 0,
top: 0, // size in pixel
size: 200, // code color or image element
fill: '#000', // background color or image element, null for transparent background
background: null, // content
text: 'no text', // corner radius relative to module width: 0.0 .. 0.5
radius: 0, // quiet zone in modules
quiet: 0, // modes
// 0: normal
// 1: label strip
// 2: label box
// 3: image strip
// 4: image box
mode: 0, mSize: 0.1,
mPosX: 0.5,
mPosY: 0.5, label: 'no label',
fontname: 'sans',
fontcolor: '#000', image: null
}

(试了试,似乎没啥用▲)

常用的有

$(“#erweima”).qrcode({
render:"table",
width:200,
height:200,
background:'#ffffff',//背景颜色
foreground:'#ff0000',//二维码颜色
text:"http://www.yxxrui.cn"
});

需要注意的是:table的方式效率比较低,canvas方式效率高一点(默认为canvas),但是canvas方式必须在支持html5的浏览器上才能使用,如果使用canvas时会出现无法生成的情况,而使用table时会出现速度慢的情况,所以可以考虑判断当前浏览器是否支持html5.

加粗部分如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>二维码DEMO</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
</head>
<body>
<div id="erweima"></div>
<script type="text/javascript">
var renderStr;//显示方式,有canvas和table两种
//检查是否支持html5,也可以使用其他方式
if (window.applicationCache) {
renderStr = 'canvas';
}else{
renderStr = 'image';
}
$('#erweima').qrcode({
render: renderStr,
width: 180,
height:180,
text: "http://www.yxxrui.cn"
//可以设置为当前url,如:window.location+""
});
</script>
</body>
</html>

加粗部分如上:

生成的二维码如下:

DEMO下载地址(可直接运行):http://www.yxxrui.cn/article/65.shtml

JQuery生成二维码,有资源下载的更多相关文章

  1. 微信生成二维码 只需一个网址即刻 还有jquery生成二维码

    <div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text ...

  2. jquery生成二维码并实现图片下载

    1.引入jquery的两个js文件 <script src="../scripts/erweima/jquery-1.10.2.min.js"></script& ...

  3. js,JQuery 生成二维码

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  4. jquery 生成二维码

    jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码 <!DOCTYPE html> <html> <head> <meta ch ...

  5. jquery生成二维码图片

    1.插件介绍 jquery.qrcode.min.js插件是jq系列的基于jq,在引入该插件之前要先引入jq.能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生 ...

  6. 使用jquery生成二维码

    二维码已经渗透到生活中的方方面面,不管到哪,我们都可以用扫一扫解决大多数问题.二狗为了准备应对以后项目中会出现的二维码任务,就上网了解了如何使用jquery.qrcode生成二维码.方法简单粗暴,[] ...

  7. jQuery生成二维码 jquery.qrcode.js

    https://github.com/jeromeetienne/jquery-qrcode 1.将jquery.qrcode.min.js和jquery添加到您的网页中 <script src ...

  8. vue2.0生成二维码图片并且下载图片到本地兼容写法

    vue生成二维码图片,这里使用的是qrcode.js 这个插件(亲测写法,兼容没有问题) 第一步,下载插件 需要注意,这里下载的是qrcodejs2 cnpm install --save qrcod ...

  9. canvas生成二维码,并下载保存为本地的图片

    function getTicket(id,salt){//qrcode生成canvas二维码 $(".zc-mask").show(); $(".edit-box&qu ...

随机推荐

  1. C语言新手入门

    include<stdio.h> int main() { //输入一个数 输出它的反序列 c int a,b=0; scanf("%d",&a);//输入一个 ...

  2. Java基础教程——正则表达式

    正则表达式·Regular Expression 正则表达式就是一个用于匹配字符串的模板,正则表达式并不仅限于某一种语言,但是在每种语言中有细微的差别. 主要用到的对象: java.util.rege ...

  3. 三. Vue组件化

    1. 认识组件化 1.1 什么是组件化 人面对复杂问题的处理方式 任何一个人处理信息的逻辑能力都是有限的,所以当面对一个非常复杂的问题时我们不太可能一次性搞定一大堆的内容. 但是我们人有一种天生的能力 ...

  4. 2014.04.28基于CPLD的LCOS场序彩色视频控制器设计

    基于CPLD的LCOS场序彩色视频控制器设计 作者:宋丹娜,代永平,刘艳艳,商广辉 发表刊物:液晶与显示,2009 学习时间:2014.04.28 文章讲述了-- (和上一篇论文有些相似之处) 1. ...

  5. 冲刺随笔——Day_Ten

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺 作业正文 正文 其他参考文献 无 ...

  6. cert-manager管理内网k8s开发环境证书

    目的 内网k8s开发环境配置HTTPS,保持与生产环境的配置的一致性,其必要性有: PWA开发,HTTPS是必要条件 网页引入HTTP资源,如果开发环境是HTTP就不会被开发和测试人员发现,造成生产环 ...

  7. python核心高级学习总结7---------正则表达式

    正则表达式在爬虫项目中应用很广泛,主要方面就是在字符串处理方面,经常会涉及到字符串格式的校验,用起来经常要查看文档才能完成,所以抽了个时间将正则的内容复习了一下. Start re---导入re模块使 ...

  8. 老猿学5G扫盲贴:中国移动5G融合计费漫游计费架构和路由方案

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt+moviepy音视频剪辑实战 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一. ...

  9. 转:Chrome浏览器查看网站登录 Cookie 信息的方法

    当我们使用自动签到等程序的时候一般都要用到网站Cookie,我们可以借助浏览器的扩展来获取Cookie信息,但其实通过浏览器本身的功能就可以查看Cookie信息.以Chrome类浏览器为例有以下三种方 ...

  10. PyQt(Python+Qt)学习随笔:Qt Designer中部件的windowIcon属性

    windowIcon对象为部件对象的属性,但只有窗口对象有效,其他派生对象如pushButtong对象无效. 在windowIcon对象上有如下子属性设置: 这几个子属性实际上是QIcon类中继承的. ...