js 生成一维码(条形码)

http://blog.youkuaiyun.com/zhaokuo719/article/details/8978228

1、js代码：

[javascript]  view plain  copy

 print ?

1. (function() {  
2.   if (!exports) var exports = window;  
3.   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]  
4.     , START_BASE = 38  
5.     , STOP       = 106  ;  
6.   function code128(code, barcodeType) {  
7.     if (arguments.length<2)  
8.          barcodeType = code128Detect(code);  
9.     if (barcodeType=='C' && code.length%2==1)   
10.         code = '0'+code;   
11.     var a = parseBarcode(code,  barcodeType);  
12.     return bar2html(a.join('')) + '<label>' + code + '</label>';   
13.   }  
14.   
15.   function bar2html(s) {  
16.     for(var pos=0, sb=[]; pos<s.length; pos+=2) {  
17.       sb.push('<div class="bar' + s.charAt(pos) + ' space' + s.charAt(pos+1) + '"></div>');  
18.     }  
19.     return sb.join('');  
20.   }  
21.   
22.   function code128Detect(code) {  
23.     if (/^[0-9]+$/.test(code)) return 'C';  
24.     if (/[a-z]/.test(code)) return 'B';  
25.     return 'A';  
26.   }  
27.   
28.   function parseBarcode(barcode, barcodeType) {  
29.     var bars = [];  
30.     bars.add = function(nr) {  
31.       var nrCode = BARS[nr];  
32.       this.check = this.length==0 ? nr : this.check + nr*this.length;  
33.       this.push( nrCode || ("UNDEFINED: "+nr+"->"+nrCode) );  
34.     };  
35.     bars.add(START_BASE + barcodeType.charCodeAt(0));  
36.     for(var i=0; i<barcode.length; i++) {  
37.       var code = barcodeType=='C' ? +barcode.substr(i++, 2) : barcode.charCodeAt(i);  
38.       converted = fromType[barcodeType](code);  
39.       if (isNaN(converted) || converted<0 || converted>106) throw new Error("Unrecognized character ("+code+") at position "+i+" in code '"+barcode+"'.");  
40.       bars.add( converted );  
41.     }  
42.     bars.push(BARS[bars.check % 103], BARS[STOP]);  
43.     return bars;  
44.   }  
45.   var fromType = {  
46.     A: function(charCode) {  
47.       if (charCode>=0 && charCode<32) return charCode+64;  
48.       if (charCode>=32 && charCode<96) return charCode-32;  
49.       return charCode;  
50.     },  
51.     B: function(charCode) {  
52.       if (charCode>=32 && charCode<128) return charCode-32;  
53.       return charCode;  
54.     },  
55.     C: function(charCode) {  
56.       return charCode;  
57.     }  
58.   };  
59.     
60.   //--| Export  
61.   exports.code128 = code128;  
62. })();  
63.   
64. /* 
65.     showDiv：代表需要显示的divID， 
66.     textVlaue ： 代表需要生成的值， 
67.     barcodeType：代表生成类型(A、B、C)三种类型 
68.      
69. */  
70. function createBarcode(showDiv,textValue,barcodeType){  
71.     var divElement = document.getElementById(showDiv);  
72.         divElement.innerHTML = code128(textValue,barcodeType);  
73. }  

2.css代码如下：

[css]  view plain  copy

 print ?

1. .barcode {   
2.   float:left;  
3.   clear:both;  
4.   padding: 0 10px; /*quiet zone*/  
5.   overflow:auto;  
6.   height:0.5in; /*size*/   
7. }  
8. .right { float:right; }  
9. .barcode + * { clear:both; }  
10. .barcode div {   
11.   float:left;  
12.   height: 0.35in; /*size*/  
13. }  
14. .barcode .bar1 { border-left:1px solid black; }  
15. .barcode .bar2 { border-left:2px solid black; }  
16. .barcode .bar3 { border-left:3px solid black; }  
17. .barcode .bar4 { border-left:4px solid black; }  
18. .barcode .space0 { margin-right:0 }  
19. .barcode .space1 { margin-right:1px }  
20. .barcode .space2 { margin-right:2px }  
21. .barcode .space3 { margin-right:3px }  
22. .barcode .space4 { margin-right:4px }  
23. .barcode label {   
24.   clear:both;   
25.   display:block;   
26.   text-align:center;    
27.   font: 0.125in/100% helvetica; /*size*/  
28. }  
29. /*** bigger ******************************************/  
30. .barcode2 {   
31.   float:left;  
32.   clear:both;  
33.   padding: 0 10px; /*quiet zone*/  
34.   overflow:auto;  
35.   height:1in; /*size*/   
36. }  
37. .barcode2 + * { clear:both; }  
38. .barcode2 div {   
39.   float:left;  
40.   height: 0.7in; /*size*/  
41. }  
42. .barcode2 .bar1 { border-left:2px solid black; }  
43. .barcode2 .bar2 { border-left:4px solid black; }  
44. .barcode2 .bar3 { border-left:6px solid black; }  
45. .barcode2 .bar4 { border-left:8px solid black; }  
46. .barcode2 .space0 { margin-right:0 }  
47. .barcode2 .space1 { margin-right:2px }  
48. .barcode2 .space2 { margin-right:4px }  
49. .barcode2 .space3 { margin-right:6px }  
50. .barcode2 .space4 { margin-right:8px }  
51. .barcode2 label {   
52.   clear:both;   
53.   display:block;   
54.   text-align:center;    
55.   font: 0.250in/100% helvetica; /*size*/  
56. }  

3.html代码如下：

[html]  view plain  copy

 print ?

1. <html>  
2.   <head>  
3.     <title>QR-Code Clock</title>  
4.     <link rel="stylesheet" href="code128.css" type="text/css" media="screen" charset="utf-8">  
5.     <script src="code128.js" type="text/javascript" charset="utf-8"></script>  
6.        <script type="text/javascript">  
7. (function(divId) {                                                         
8.   var  divElement ,oldOnLoad = window.onload  ;  
9.   function getTimeString() {  
10.     var pad = function(n) { return n < 10 ? '0' + n.toString(10) : n.toString(10); }  
11.        ,dt = new Date();  
12.     return [pad(dt.getHours()), pad(dt.getMinutes()), pad(dt.getSeconds())].join(':');  
13.   }  
14.     
15.   function UpdateClock() {  
16.     var timeText = getTimeString();  
17.     divElement.innerHTML = code128(timeText);  
18.   }  
19.   window.onload = function() {  
20.     divElement = document.getElementById(divId);  
21.     UpdateClock();  
22.     setInterval(UpdateClock, 1000);  
23.     if (typeof oldOnLoad == 'function') oldOnLoad.apply(this, arguments);  
24.   }  
25. })('div1');  
26.     </script>  
27.   
28.   </head>  
29.   <body>  
30.     <input type="button" value ="生成"  onclick="createBarcode('div128','zhaokuo','B');"/>  
31.      <div class="barcode2" id="div128"></div>  
32.      <div class="barcode2" id="div1"></div>       
33.   </body>  
34. </html>  

下载地址： http://download.youkuaiyun.com/detail/zhaokuo719/5456817