JS

巧用JS生成二维码

广告

QRCode.js介绍

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

QRCode.js下载地址

用法如下

只使用一个插件,生成的二维码没有logo以及背景图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR二维码</title>
    <script src='./qrcodejs/qrcode.js'></script>
</head>
<body>
    内容:<input type="text" id="content" value="https://fenkexie.cn" />  <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 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>

展示图

QRCode

原创文章,作者:zbwyfkx,如若转载,请注明出处:https://www.fenkexie.cn/archives/43/
-- 展开阅读全文 --
军训必备,军训小经验让你轻松度过军训
« 上一篇 08-02
Markdown基本语法
下一篇 » 08-05

发表评论

作者信息

广告

热门文章

1
2
3
4

标签TAG

热评文章