站点图标 度崩网-几度崩溃

QRCode.js – 用于JavaScript的跨浏览器QRCode生成器[web前端]

QRCode.js – 用于JavaScript的跨浏览器QRCode生成器[web前端]

QRCode.js是用于制作QRCode的JavaScript库。QRCode.js通过HTML5 Canvas和DOM中的表格标签支持跨浏览器。QRCode.js没有依赖关系。

基本用法:

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
</script>

控制选项:

<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
	text: "http://jindo.dev.naver.com/collie",
	width: 128,
	height: 128,
	colorDark : "#000000",
	colorLight : "#ffffff",
	correctLevel : QRCode.CorrectLevel.H
});
</script>

你可以使用一些方法:

qrcode.clear(); 
// clear the code.

qrcode.makeCode("http://naver.com"); 
// make another code.

浏览器兼容性

IE6〜10,Chrome,Firefox,Safari,Opera,Mobile Safari,Android,Windows Mobile,ETC。

如何使用?

您需要先加载 jquery.js 和 qrcode.js 这两个JS,(页底提供压缩包)

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

这是一个简单的用法

<div id="value1">https://www.npc.ink/#</div>
	<div id="qrcode-n"></div>
	<script>
		abc = $("#value1").text();
		
//document.write(abc);    

		new QRCode(document.getElementById("qrcode-n"), abc);
	</script>

扩充:

在网页快速生成二维码的演示

只使用一个插件,不使用任何动态编程语言,不调用jq等插件。生成二维码,生成的二维码没有徽标以及背景图。

此代码中,无法去除上一次生成的二维码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> JS 生成二维码</title>
</head>
<body>
    内容:<input type="text" id="content" value="https://i.csdn.net/#/uc/profile" />  <br><br>
    尺寸:<input type="text" id="size" value="150"><br><br>
    背景:<input type="text" id="color" value="#fff"><br><br>
    前景:<input type="text" id="colorr" value="#000"><br><br>
    <button id="btn">生成二维码</button><br><br>
    <div id="qrcode"></div>
</body>
<script src='qrcode/qrcode.js'></script>
<script type="text/javascript">

    
//声明变量啊~~

    let qrcode;
    let content;
    let size;
    let color;
    let colorr;
    
// 设置点击事件

    document.getElementById("btn").onclick =function(){
        
// 获取内容

        content = document.getElementById("content").value;
        
// 获取尺寸

        size = document.getElementById("size").value;
         
// 获取背景

        color = document.getElementById("color").value;
         
// 获取前景

        colorr = document.getElementById("colorr").value;
        
// 清除上一次的二维码

         if(qrcode){
            qrcode.clear();
        }
        
// 创建二维码

        qrcode = new QRCode(document.getElementById("qrcode"), {
            width : size,
//设置宽高

            height : size,
            colorLight : color,
            colorDark : colorr,
            
        });
        qrcode.makeCode(document.getElementById("content").value);

    }

</script>
</html>

 

1
QRCode.js – 用于JavaScript的跨浏览器QRCode生成器[web前端]
2

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余