当前位置:首页 > 网络技术 > js插件:自动生成二维码的javascript库QRCode.js(自动生成js代码)

js插件:自动生成二维码的javascript库QRCode.js(自动生成js代码)

longge2021-12-17 20:29:54网络技术174

QRCode.js是一个用于生成二维码的javascript库,通过获取DOM标签再使用html5的Canvas绘制而成,不依赖任何库(如jQuery)。QRCode.js支持IE6~10, chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile等浏览器

使用方法:

1、下载地址:https://github.com/davidshimjs/qrcodejs

2、引用qrcode.js文件:

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

3、HTML代码:

<div id="qrcode"></div>

4、javascript代码:

<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://www.neirong.org");  // 设置要生成二维码的链接
</script>

5、完成。

参数设置:

var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "http://www.neirong.org", //网址
    width: 128, //宽
    height: 128, //高
    colorDark : "#000000", //前景色
    colorLight : "#ffffff", //背景色
    correctLevel : QRCode.CorrectLevel.H //纠错等级
});

可以使用的方法:

qrcode.clear(); // 清除代码
qrcode.makeCode("http://neirong.org"); // 生成另一个二维码

应用示例:

HTML代码:

<input id="text" type="text" value="http://www.neirong.org" />
<div id="qrcode"></div>

CSS代码:

#qrcode {
	width:160px;
	height:160px;
} 

javascript代码:

var qrcode = new QRCode("qrcode");
function makeCode () {      
    var elText = document.getElementById("text");
    
    if (!elText.value) {
        alert("Input a text");
        elText.focus();
        return;
    }    
    qrcode.makeCode(elText.value);
}
makeCode();
$("#text").on("blur", function () {
    makeCode();
}).on("keydown", function (e) {
    if (e.keyCode == 13) {
        makeCode();
    }
});

代码解释:通过QRCode.js把输入框的值生成二维码

免责声明
本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。#转载请注明出处!
  • 随机文章
  • 热门文章
  • 热评文章