本文实例讲述了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,121124,121421,141122,141221,112214,112412,122114,122411,142112,142211,241211,221114,413111,241112,134111,111242,121142,121241,114212,124112,124211,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('')) + '<label>' + code + '</label>'; } function bar2html(s) { for(var pos=0, sb=[]; pos<s.length; pos+=2) { sb.push('<p class="bar' + s.charat(pos) + ' space' + s.charat(pos+1) + '"></p>'); } 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; i<barcode.length; i++) { var code = barcodetype=='c' ? +barcode.substr(i++, 2) : barcode.charcodeat(i); converted = fromtype[barcodetype](code); if (isnan(converted) || converted<0 || converted>106) 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代码如下：
<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>
运行效果图如下：
以上就是js生成条形码功能示例代码的详细内容。