一、前言

最近做項目用到了JS生成條形碼和二維碼，內(nèi)容不多，整理一下方便使用。

2018年7月5日更新：

二維碼生成時，如果長度太長會有異常：
Uncaught Error: code length overflow. (1604>1056)
創(chuàng)建的時候，添加 correctLevel: 3 就可以解決了。

二、資源打包下載

資源下載

三、JS條形碼生成

1、Github

這里是作者的Github，有更詳細的內(nèi)容可以學(xué)習(xí)：
https://github.com/lindell/JsBarcode

2、JS引用

<script type="text/javascript" src="jquery-2.1.3.min.js"></script> <script type="text/javascript" src="JsBarcode.all.min.js"></script>

3、主要代碼

<script>$("#svgcode").JsBarcode('Hi!');//or JsBarcode("#svgcode", "Hi!");$("#canvascode").JsBarcode('Hello world!');//or JsBarcode("#canvascode", "Hello world!");JsBarcode("#imgcode", "20170715152058515");//or $("#imgcode").JsBarcode("I'm huangenai!"); </script>

4、條形碼效果圖

四、JS二維碼生成

1、Github

這里是作者的Github，有更詳細的內(nèi)容可以學(xué)習(xí)：
https://github.com/davidshimjs/qrcodejs

2、Js引用

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

3、主要代碼

var qrcode = new QRCode(document.getElementById("qrcode"), {width: 400,height: 400,correctLevel: 3 }); function makeCode() {var elText = document.getElementById("text");if (!elText.value) {alert("Input a text");elText.focus();return;}qrcode.makeCode(elText.value); }

4、二維碼效果圖

五、擴展學(xué)習(xí)

之前收藏了一張二維碼動圖詳解，這里分享一下

總結(jié)

以上是生活随笔為你收集整理的JS的条形码和二维码生成的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。