Home  >  Article  >  Web Front-end  >  JS generate barcode function sample code

JS generate barcode function sample code

零下一度
零下一度Original
2017-04-19 15:58:122085browse

This article mainly introduces the function of JS to generate one-dimensional codes (barcodes), and analyzes the specific steps and related operating techniques of JS plug-in to generate barcodes in the form of a complete example. Friends in need can refer to this article

The example describes the method of generating one-dimensional code (barcode) function using JS. Share it with everyone for your reference, the details are as follows:

1. js code:

(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==&#39;C&#39; && code.length%2==1)
    code = &#39;0&#39;+code;
  var a = parseBarcode(code, barcodeType);
  return bar2html(a.join(&#39;&#39;)) + &#39;<label>&#39; + code + &#39;</label>&#39;;
 }
 function bar2html(s) {
  for(var pos=0, sb=[]; pos<s.length; pos+=2) {
   sb.push(&#39;<p class="bar&#39; + s.charAt(pos) + &#39; space&#39; + s.charAt(pos+1) + &#39;"></p>&#39;);
  }
  return sb.join(&#39;&#39;);
 }
 function code128Detect(code) {
  if (/^[0-9]+$/.test(code)) return &#39;C&#39;;
  if (/[a-z]/.test(code)) return &#39;B&#39;;
  return &#39;A&#39;;
 }
 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==&#39;C&#39; ? +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 &#39;"+barcode+"&#39;.");
   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 code is as follows:


.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. The html code is as follows:


<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 ? &#39;0&#39; + n.toString(10) : n.toString(10); }
    ,dt = new Date();
  return [pad(dt.getHours()), pad(dt.getMinutes()), pad(dt.getSeconds())].join(&#39;:&#39;);
 }
 function UpdateClock() {
  var timeText = getTimeString();
  pElement.innerHTML = code128(timeText);
 }
 window.onload = function() {
  pElement = document.getElementById(pId);
  UpdateClock();
  setInterval(UpdateClock, 1000);
  if (typeof oldOnLoad == &#39;function&#39;) oldOnLoad.apply(this, arguments);
 }
})(&#39;p1&#39;);
  </script>
 </head>
 <body>
  <input type="button" value ="生成" onclick="createBarcode(&#39;p128&#39;,&#39;12345678&#39;,&#39;B&#39;);"/>
   <p class="barcode2" id="p128"></p>
   <p class="barcode2" id="p1"></p>
 </body>
</html>

The running effect is as follows:

The above is the detailed content of JS generate barcode function sample code. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn