web頁生成條碼

時間 2020-11-16

標籤 html jquery 字體 spa code orm xml htm blog 欄目 HTML 简体版

原文原文鏈接

<!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="./js/JsBarcode.all.js"></script>
    <script src="./js/jquery-1.4.4.min.js"></script>
    <script>
        function genbarcode()
        {
            $("#divBarcode").show();
            var bctext = $("#tbBCText").val().toUpperCase();
            var showvalue = $('#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="生成條碼" 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="20"/></label>
    </span>
    <div id="divBarcode" hidden="hidden">
        <img id="barcode" alt="條碼圖片"/>
    </div>
</body>
</html>

將上述代碼保存爲barcode.html文件，頁面效果以下圖：html