<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="https://www.cnblogs.com/BillyQian/archive/2020/11/10/js/JsBarcode.all.js"></script>
<script src="https://www.cnblogs.com/BillyQian/archive/2020/11/10/js/jquery-1.4.4.min.js"></script>
<script>
function genbarcode()
{
$("#divBarcode").show();
var bctext = $("#tbBCText").val().toUpperCase();
var showvalue = https://www.cnblogs.com/BillyQian/archive/2020/11/10/$('#cbDisplayValue').is(':checked');
var fontsize = $("#tbFontsize").val();
JsBarcode("#barcode", bctext,
{
format: "CODE128",
displayValue: showvalue, //true or false
fontSize: fontsize
//lineColor: "#0cc" //設定條碼顏色
}
);
}
</script>
</head>
<body>
<span>
<input id="tbBCText" type="text" style="width:250px"/>
<input id="btnGen" type="button" value="https://www.cnblogs.com/BillyQian/archive/2020/11/10/生成條碼" onclick="genbarcode()"/>
</span>
<span style="font-size:small">
<label><input id="cbDisplayValue" type="checkbox" checked="checked" />顯示條碼文本</label>
<label>文本字體大小<input id="tbFontsize" type="text" style="width:50px" value="https://www.cnblogs.com/BillyQian/archive/2020/11/10/20"/></label>
</span>
<div id="divBarcode" hidden="hidden">
<img id="barcode" alt="條碼圖片"/>
</div>
</body>
</html>
將上述代碼保存為barcode.html檔案，頁面效果如下圖：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/209591.html
標籤：其他
上一篇：Vue中用的比較多的幾個API