jquery-barcode 生成条形码

发布网友发布时间：2022-04-26 20:24

共2个回答

懂视网时间：2022-05-16 07:07

这篇文章主要介绍了JS生成一维码(条形码)功能,结合完整实例形式分析了JS插件生成条形码的具体步骤与相关操作技巧,需要的朋友可以参考下

本文实例讲述了JS生成一维码(条形码)功能的方法。分享给大家供大家参考，具体如下：

1、js代码：

2.css代码如下：

.barcode {
 float:left;
 clear:both;
 padding: 0 10px; /*quiet zone*/
 overflow:auto;
 height:0.5in; /*size*/
}
.right { float:right; }
.barcode + * { clear:both; }
.barcode p {
 float:left;
 height: 0.35in; /*size*/
}
.barcode .bar1 { border-left:1px solid black; }
.barcode .bar2 { border-left:2px solid black; }
.barcode .bar3 { border-left:3px solid black; }
.barcode .bar4 { border-left:4px solid black; }
.barcode .space0 { margin-right:0 }
.barcode .space1 { margin-right:1px }
.barcode .space2 { margin-right:2px }
.barcode .space3 { margin-right:3px }
.barcode .space4 { margin-right:4px }
.barcode label {
 clear:both;
 display:block;
 text-align:center;
 font: 0.125in/100% helvetica; /*size*/
}
/*** bigger ******************************************/
.barcode2 {
 float:left;
 clear:both;
 padding: 0 10px; /*quiet zone*/
 overflow:auto;
 height:1in; /*size*/
}
.barcode2 + * { clear:both; }
.barcode2 p {
 float:left;
 height: 0.7in; /*size*/
}
.barcode2 .bar1 { border-left:2px solid black; }
.barcode2 .bar2 { border-left:4px solid black; }
.barcode2 .bar3 { border-left:6px solid black; }
.barcode2 .bar4 { border-left:8px solid black; }
.barcode2 .space0 { margin-right:0 }
.barcode2 .space1 { margin-right:2px }
.barcode2 .space2 { margin-right:4px }
.barcode2 .space3 { margin-right:6px }
.barcode2 .space4 { margin-right:8px }
.barcode2 label {
 clear:both;
 display:block;
 text-align:center;
 font: 0.250in/100% helvetica; /*size*/
}

3.html代码如下：

<html>
 <head>
 <title>QR-Code Clock</title>
 <link rel="stylesheet" href="code128.css" type="text/css" media="screen" charset="utf-8">
 <script src="code128.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
(function(pId) {
 var pElement ,oldOnLoad = window.onload ;
 function getTimeString() {
 var pad = function(n) { return n < 10 ? '0' + n.toString(10) : n.toString(10); }
 ,dt = new Date();
 return [pad(dt.getHours()), pad(dt.getMinutes()), pad(dt.getSeconds())].join(':');
 }
 function UpdateClock() {
 var timeText = getTimeString();
 pElement.innerHTML = code128(timeText);
 }
 window.onload = function() {
 pElement = document.getElementById(pId);
 UpdateClock();
 setInterval(UpdateClock, 1000);
 if (typeof oldOnLoad == 'function') oldOnLoad.apply(this, arguments);
 }
})('p1');
 </script>
 </head>
 <body>
 <input type="button" value ="生成" onclick="createBarcode('p128','12345678','B');"/>
 <p class="barcode2" id="p128"></p>
 <p class="barcode2" id="p1"></p>
 </body>
</html>

运行效果图如下：

热心网友时间：2022-05-16 04:15

一、引入SCRIPT文件
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-barcode.js"></script>

JQuery 版本无所谓、只要在1.3.2以上就ok
二、使用这个插件，定义一个 DIV 容器显示条形码
<div id="bcTarget"></div>

三、JAVASCRIPT事例代码
$("#bcTarget").barcode("1234567890128", "ean13");