记录一个前端生成二维码的插件jquery.qrcode.js(JS前端开发)
导读:
本期记录一个非常实用的前端动态生成二维码的插件jquery.qrcode.js,jquery.qrcode.js是一个能够在客户端生成矩阵二维码QRCode的jquery插件,使用它可以很方便的在页面上生成二维码。
1、引入:将jquery.min.js和jquery.qrcode.min.js直接引入。
<script src="jquery.min.js"></script>
<script src="jquery.qrcode.min.js"></script>
或CDN引入:
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
2、创建 DOM :创建一个 DOM 元素去包含生成 qr 码
<div id="qrcode"></div>
3、生成二维码:在此容器中的添加 qrcode。
<script>
jQuery(function(){
jQuery('#qrcode').qrcode("https://www.baidu.com/");
})
</script>
4、指定二维码的生成方式:
//使用table生成
jQuery('#qrcode').qrcode({
render: "table",
text: "https://www.23bei.com/"
});
//使用canvas生成
jQuery('#qrcode').qrcode({
render: "canvas",
text: "https://www.23bei.com/"
});
5、指定生成二维码的大小:
可以在调用函数的同时输入想要生成二维码的宽度和高度即可指定生成的二维码的大小。
//生成100*100(宽度100,高度100)的二维码
jQuery('#qrcode').qrcode({
render: "canvas", //也可以替换为table
width: 100,
height: 100,
text: "https://www.baidu.com/"
});
6、指定生成二维码的色彩样式:
可以在调用函数的同时输入想要生成二维码的前景色和背景色即可指定生成的二维码的色彩样式。
//生成前景色为红色背景色为白色的二维码
jQuery('#qrcode').qrcode({
render: "canvas", //也可以替换为table
foreground: "#C00",
background: "#FFF",
text: "https://www.baidu.com/"
});
7、生成中文 ULR :
jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI进行转码
相关推荐
jquery插件Marquee.js实现无缝滚动效果代码分享
本文介绍胃jquery插件Marquee.js实现无缝滚动效果代码。Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果,配制代码如下:{ yScroll: "top" //…
2022-05-22 21:40:09 | 分类:默认 | 作者:myerob | 阅读:152 | 标签:jquery 插件 Marquee.js 实现 无缝 滚动 效果 | 收藏
记录一个合成图片插件html2canvas.js(JS前端开发)
本文记录一个前端开发中端常用的合成图片插件(html2canvas.js),在H5开发中,我们经常会遇上动态生成海报的需求,而在Web前端中,生成图片非Canvas莫属。html2canvas.js就…
2022-05-23 20:29:09 | 分类:JS | 作者:myerob | 阅读:878 | 标签:合成 图片 插件 html2canvas.js JS 前端 开发 | 收藏
记录一个前端生成二维码的插件jquery.qrcode.js(JS前端开发)
本期记录一个非常实用的前端动态生成二维码的插件jquery.qrcode.js,jquery.qrcode.js是一个能够在客户端生成矩阵二维码QRCode的jquery插件,使用它可以很方便的在页面…
2022-05-23 21:02:27 | 分类:JS | 作者:myerob | 阅读:238 | 标签:前端 二维码 插件 jqueryqrcode JS 前端 开发 | 收藏
javascript,JS怎么对url进行编码转换
项目中url遇到传参数传数组对象解析失败问题,采用转码方式解决,但并不清楚实际原理,研究了一下JS转码解码。Javascript语言用于编码的函数,一共有三个。escape()encodeURI()e…
2022-10-29 19:12:36 | 分类:JS | 作者:myerob | 阅读:318 | 标签:escape encodeURI encodeURIComponent | 收藏
PHP json_decode()报错 json_last_error()判断错误类型及解决方法
PHP json_decode()报错 json_last_error()判断错误类型 解决背景:最近在用curl请求接口获取json数据串的时候,一直出现PHP中json_decode()解析字符串…
2022-10-29 21:45:57 | 分类:PHP | 作者:myerob | 阅读:620 | 标签:PHP json_decode() 报错 json_last_error() 判断错误类型 解决方法 | 收藏
滚动条插件 NiceScroll 使用详解
有时为了保持页面风格的统一,我们需要修改滚动条的样式。虽然我们可以通过 CSS 设置滚动条各部分的颜色样式,但这种方式不支持老版本的浏览器。而且不同的浏览器下,CSS 滚动条属性的写法也不一样,如果各…
2022-12-05 22:23:19 | 分类:JS | 作者:myerob | 阅读:365 | 标签:滚动条插件 NiceScroll 使用详解 | 收藏
- 阅读榜
- 1. 离职员工申报个税删不掉 显示存在收入明细,若该人员已离职或退休,请将人员状态改为非正常。可改为非正常后还是不行
- 2. 个人所得税申报系统(扣缴端)如何删除已离职人员信息
- 3. U.FL座 IPEX/IPX接头1代,2代,3代,4代,5代区分对照图
- 4. mounRiver/eclipse报错“Symbol could not be resolved”,但是编译没有问题
- 5. NTC热敏电阻B值3950(温度系数对照表)
- 6. 单片机测量NTC热敏电阻温度,函数计算方式。
- 7. GB2312汉字编码字符集对照表
- 8. javascript实现图片左右无缝滚动效果(附代码)
- 9. ASCII码一览表,ASCII码对照表
- 10. h3c交换机乱码怎么弄(h3c 配置备份报错)如何修改交换机字符集?