js 生成一维码(条形码)

http://blog.csdn.net/zhaokuo719/article/details/8978228

1、js代码：

[javascript] view
plain copy

 print?

(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('<div class="bar' + s.charAt(pos) + ' space' + s.charAt(pos+1) + '"></div>');  

    }  

    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;  

})();  

  

/* 

    showDiv：代表需要显示的divID， 

    textVlaue ： 代表需要生成的值， 

    barcodeType：代表生成类型(A、B、C)三种类型 

     

*/  

function createBarcode(showDiv,textValue,barcodeType){  

    var divElement = document.getElementById(showDiv);  

        divElement.innerHTML = code128(textValue,barcodeType);  

}  

2.css代码如下：

[css] view
plain copy

 print?

.barcode {   

  float:left;  

  clear:both;  

  padding: 0 10px; /*quiet zone*/  

  overflow:auto;  

  height:0.5in; /*size*/   

}  

.right { float:right; }  

.barcode + * { clear:both; }  

.barcode div {   

  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 div {   

  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] view
plain copy

 print?

<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(divId) {                                                         

  var  divElement ,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();  

    divElement.innerHTML = code128(timeText);  

  }  

  window.onload = function() {  

    divElement = document.getElementById(divId);  

    UpdateClock();  

    setInterval(UpdateClock, 1000);  

    if (typeof oldOnLoad == 'function') oldOnLoad.apply(this, arguments);  

  }  

})('div1');  

    </script>  

  

  </head>  

  <body>  

    <input type="button" value ="生成"  onclick="createBarcode('div128','zhaokuo','B');"/>  

     <div class="barcode2" id="div128"></div>  

     <div class="barcode2" id="div1"></div>       

  </body>  

</html>  

下载地址：http://download.csdn.net/detail/zhaokuo719/5456817