Heim > Web-Frontend > js-Tutorial > JS generiert einen Beispielcode für die Barcode-Funktion

JS generiert einen Beispielcode für die Barcode-Funktion

零下一度
Freigeben: 2017-04-19 15:58:12
Original
2110 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Funktion von JS zum Generieren eindimensionaler Codes (Barcodes) vorgestellt und die spezifischen Schritte und zugehörigen Betriebstechniken des JS-Plug-Ins zum Generieren von Barcodes anhand eines vollständigen Beispiels analysiert siehe diesen Artikel

Das Beispiel beschreibt die Methode der JS-Generierung einer eindimensionalen Code-Funktion (Barcode). Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1 >

(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);
}
Nach dem Login kopieren

3.html-Code lautet wie folgt:


.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*/
}
Nach dem Login kopieren

Der Laufeffekt ist wie folgt:


Das obige ist der detaillierte Inhalt vonJS generiert einen Beispielcode für die Barcode-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage