这篇文章主要介绍了js生成一维码(条形码)功能,结合完整实例形式分析了js插件生成条形码的具体步骤与相关操作技巧,需要的朋友可以参考下
本文实例讲述了JS生成一维码(条形码)功能的方法。分享给大家供大家参考，具体如下：
1、js代码：
(function() {
if (!exports) var exports = window;
var BARS = [212222,222122,222221,121223,121322,131222,122213,122312,132212,221213,221312,231212,112232,122132,122231,113222,123122,123221,223211,221132,221231,213212,223112,312131,311222,321122,321221,312212,322112,322211,212123,212321,232121,111323,131123,131321,112313,132113,132311,211313,231113,231311,112133,112331,132131,113123,113321,133121,313121,211331,231131,213113,213311,213131,311123,311321,331121,312113,312311,332111,314111,221411,431111,111224,111422,121124124,121421,141122,141221,112214,112412412,122114,122411,142112,142211,241211,221114,413111,241112,134111,111241242,121142,121241241,114212,124124112,124124211,411212,421112,421211,212141,214121,412121,111143,111341,131141,114113,114311,411113,411311,113141,114131,311141,411131,211412,211214,211232,23311120]
, START_BASE = 38
, STOP = 106 ;
function code128(code, barcodeType) {
if (arguments.length<2)
barcodeType = code128Detect(code);
if (barcodeType=='C' && code.length%2==1)
code = '0'+code;
var a = parseBarcode(code, barcodeType);
return bar2html(a.join('')) + '';
}
function bar2html(s) {
for(var pos=0, sb=[]; pos');
}
return sb.join('');
}
function code128Detect(code) {
if (/^[0-9]+$/.test(code)) return 'C';
if (/[a-z]/.test(code)) return 'B';
return 'A';
}
function parseBarcode(barcode, barcodeType) {
var bars = [];
bars.add = function(nr) {
var nrCode = BARS[nr];
this.check = this.length==0 ? nr : this.check + nr*this.length;
this.push( nrCode || ("UNDEFINED: "+nr+"->"+nrCode) );
};
bars.add(START_BASE + barcodeType.charCodeAt(0));
for(var i=0; i106) throw new Error("Unrecognized character ("+code+") at position "+i+" in code '"+barcode+"'.");
bars.add( converted );
}
bars.push(BARS[bars.check % 103], BARS[STOP]);
return bars;
}
var fromType = {
A: function(charCode) {
if (charCode>=0 && charCode<32) return charCode+64;
if (charCode>=32 && charCode<96) return charCode-32;
return charCode;
},
B: function(charCode) {
if (charCode>=32 && charCode<128) return charCode-32;
return charCode;
},
C: function(charCode) {
return charCode;
}
};
//--| Export
exports.code128 = code128;
})();
/*
showp：代表需要显示的pID，
textVlaue ： 代表需要生成的值，
barcodeType：代表生成类型(A、B、C)三种类型
*/
function createBarcode(showp,textValue,barcodeType){
var pElement = document.getElementById(showp);
pElement.innerHTML = code128(textValue,barcodeType);
} 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代码如下：
佳蓝在线销售系统(创业版) 佳蓝在线销售
下载
1、对ASP内核代码进行DLL封装，从而大大提高了用户的访问速度和安全性；2、采用后台生成HTML网页的格式，使程序访问速度得到进一步的提升；3、用户可发展下级会员并在下级购买商品时获得差额利润；4、全新模板选择功能；5、后台增加磁盘绑定功能；6、后台增加库存查询功能；7、后台增加财务统计功能；8、后台面值类型批量设定；9、后台财务曲线报表显示；10、完善订单功能；11、对所有传输的字符串进行安全
QR-Code Clock
运行效果图如下：
