用QRCode.js制作二维码的生成器(qrcode.makeCode方法生成二维码)
2017-09-19 14:09
585 查看
现在前端二维码的生成器有很多,像草料二维码生成器,联图二维码生成器等这些在线生成器都是生成功能比较强大,生成的二维码比较精美的在线生成器,看着比较高大上,那么他们的实现原理?就是通过QRCode.js插件的qrcode.makeCode方法来生成的二维码。
下载QRCode.js
1,引入QRCode.js
2,利用该插件生成二维码
(1),new QRCode({})此处是对生成二维码的初始化,可以设置生成二维码的宽高,颜色,背景等属性
(2),获取输入框的文本,通过qrcode.makeCode方法制作二维码
(3),对文本绑定失去焦点事件和键盘的enter键事件
效果demo:
https://rattenking.github.io/demo/16/
下载demo:
http://download.csdn.net/download/m0_38082783/9985117
效果图:
下载QRCode.js
1,引入QRCode.js
<script src="QRCode.js" type="text/javascript" charset="utf-8"></script>
2,利用该插件生成二维码
(function(){ let elText = document.getElementById("text"); let qrcode = new QRCode(document.getElementById("qrcode"), { width : 120, height : 120 }); function makeCode(){ if (!elText.value) { elText.onfocus(); return; } qrcode.makeCode(elText.value); } makeCode(); elText.addEventListener('blur',function(){ makeCode(); },false); elText.addEventListener('keydown',function(e){ if(e.keyCode === 13)makeCode(); },false); }())注意:
(1),new QRCode({})此处是对生成二维码的初始化,可以设置生成二维码的宽高,颜色,背景等属性
(2),获取输入框的文本,通过qrcode.makeCode方法制作二维码
(3),对文本绑定失去焦点事件和键盘的enter键事件
效果demo:
https://rattenking.github.io/demo/16/
下载demo:
http://download.csdn.net/download/m0_38082783/9985117
效果图:
相关文章推荐
- qrcode.js生成二维码
- 二维码生成插件(jquery.qrcode.js)说明文档
- jquery.qrcode.js 动态生成二维码插件
- 生成二维码的 jQuery 插件:jquery.qrcode.js
- Qrcode生成二维码普通篇之jquery.qrcode.min.js
- 使用Jquery.QRCode.js在web客户端生成二维码包括中文
- jquery二维码生成插件jquery.qrcode.js
- Qrcode生成二维码(普通篇)之jquery.qrcode.min.js
- QRCode.js:基于JQuery的生成二维码JS库的使用
- jquery.qrcode.js 插件生成二维码
- QRCode.js 使用js二维码 生成器
- jQuery qrcode生成二维码的方法
- jquery二维码生成插件jquery.qrcode.js
- Qrcode生成二维码(普通篇)之jquery.qrcode.min.js
- Qrcode生成二维码(logo篇)之jquery.qrcode.min.js
- 如何使用 jQuery.qrcode.js 生成二维码
- QRCode.js:使用 JavaScript 生成二维码
- 使用jquery.qrcode.js生成二维码
- QRCode.js 二维码生成并能够长按识别
- 使用qrcode.js插件生成二维码