web页生成条码 

<!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文件，页面效果如下图：

posted @ 2020-11-10 18:04  BillyQian  阅读(416)  评论(1)    收藏  举报