2021-06-08-前端生成二维码和条形码(一维码)

最新推荐文章于 2024-07-12 13:54:33 发布

热爱Java的程序猿

最新推荐文章于 2024-07-12 13:54:33 发布

阅读量2.3k

点赞数

分类专栏：后端文章标签： js javascript vue

本文链接：https://blog.csdn.net/qq_41270550/article/details/115485702

版权

JavaScript 二维码条形码 qrcode.js jsbarcode

关键词由CSDN通过智能技术生成

后端专栏收录该内容

105 篇文章 0 订阅

订阅专栏

资源

链接: https://pan.baidu.com/s/1zG4Bd3i3d0wq87Tt2t1zgg 提取码: qghk 复制这段内容后打开百度网盘手机App，操作更方便哦 
--来自百度网盘超级会员v3的分享

使用qrcode.js生成二维码

 <style>

        #qrcode {
            width:160px;
            height:160px;
            margin-top:15px;
        }
    </style>
</head>
<body>
<input id="text" type="text" value="http://www.runoob.com" /><br />
<div id="qrcode"></div>

</body>
<script>
    //二维码
    function makeCode () {
        var qrcode = new QRCode("qrcode");
        var elText = document.getElementById("text");
        if (!elText.value) {
            alert("Input a text");
            elText.focus();
            return;
        }

        qrcode.makeCode(elText.value);
    }
</script>

使用jsbarcode.all.js生成条形码

 <style>
        * {margin: 0;padding: 0;box-sizing: border-box;}
        /*h3 {text-align: center;font-size: 16px;margin: 10px;}*/
        .box {text-align: center;}
        #barcode {width: 200px;}
    </style>
</head>
<body>
<!--<h3>js自动生成条形码插件-JsBarcode</h3>-->
<div class="box">
    <img id="barcode" />
</div>

</body>
<script>
    var barcode = document.getElementById('barcode'),
        str = "5sfd9d",
        options = {
            format: "CODE128",
            displayValue: true,
            fontSize: 18,
            height: 100
        };
    // JsBarcode(barcode, str, options); //原生
    $('#barcode').JsBarcode(str, options); //jQuery
</script>