用QRCode.js制作二维码的生成器(qrcode.makeCode方法生成二维码)
现在前端二维码的生成器有很多,像草料二维码生成器,联图二维码生成器等这些在线生成器都是生成功能比较强大,生成的二维码比较精美的在线生成器,看着比较高大上,那么他们的实现原理?就是通过QRCode.js插件的qrcode.makeCode方法来生成的二维码。
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
效果图:
其他
[我的博客,欢迎交流!](http://rattenking.gitee.io/stone/index.html)
[我的CSDN博客,欢迎交流!](https://blog.csdn.net/m0_38082783)
[微信小程序专栏](https://blog.csdn.net/column/details/18335.html)
[前端笔记专栏](https://blog.csdn.net/column/details/18321.html)
[微信小程序实现部分高德地图功能的DEMO下载](http://download.csdn.net/download/m0_38082783/10244082)
[微信小程序实现MUI的部分效果的DEMO下载](http://download.csdn.net/download/m0_38082783/10196944)
[微信小程序实现MUI的GIT项目地址](https://github.com/Rattenking/WXTUI-DEMO)
[微信小程序实例列表](http://blog.csdn.net/m0_38082783/article/details/78853722)
[前端笔记列表](http://blog.csdn.net/m0_38082783/article/details/79208205)
[游戏列表](http://blog.csdn.net/m0_38082783/article/details/79035621)
相关文章
- js生成二维码的几种方法_html怎么生成二维码
- 【Node.js】1399- 3 分钟掌握 Node.js 版本的区别
- JS 最简单的域名防红方法,QQ/微信打开网站提示浏览器打开
- 在html文件中引入js代码的几种方法详解编程语言
- GoogleSuggest;-)基于js的动态下拉菜单
- 动态生成js类的实现方法
- js禁用和激活input表单的方法
- js的一些常用方法小结
- 在父页面调用子页面的JS方法
- 禁止IE用右键的JS代码
- JS中判断null、undefined与NaN的方法
- js生成动态表格并为每个单元格添加单击事件的方法
- js去除输入框中所有的空格和禁止输入空格的方法
- jquery动态加载js/css文件方法(自写小函数)
- node.js中的path.join方法使用说明
- node.js中的console.warn方法使用说明
- node.js中的http.response.write方法使用说明
- js中实现多态采用和继承类似的方法