ホームページ > ウェブフロントエンド > jsチュートリアル > JS バーコード生成関数のサンプルコード

JS バーコード生成関数のサンプルコード

零下一度
リリース: 2017-04-19 15:58:12
オリジナル
2110 人が閲覧しました

この記事では、主に 1 次元コード (バーコード) を生成する JS の機能を紹介し、バーコードを生成するための JS プラグインの具体的な手順と関連する操作テクニックを完全な例の形式で分析します。それ

この記事の例は、QR コード (バーコード) 関数の 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==&#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 コードは次のとおりです:


.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 ? &#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>
ログイン後にコピー

操作レンダリングは次のとおりです:

以上がJS バーコード生成関数のサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート