一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

JS生成一维码(条形码)功能的教程

时间:2017-02-06 编辑:简简单单 来源:一聚教程网

本文实例讲述了JS生成一维码(条形码)功能的方法。分享给大家供大家参考,具体如下:

1、js代码:

 

 代码如下 复制代码

(function() {

 if(!exports)varexports = window;

 varBARS    = [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 ;

 functioncode128(code, barcodeType) {

  if(arguments.length<2)

     barcodeType = code128Detect(code);

  if(barcodeType=='C'&& code.length%2==1)

    code ='0'+code;

  vara = parseBarcode(code, barcodeType);

  returnbar2html(a.join('')) +'';

 }

 functionbar2html(s) {

  for(varpos=0, sb=[]; pos

   sb.push('

');

  }

  returnsb.join('');

 }

 functioncode128Detect(code) {

  if(/^[0-9]+$/.test(code))return'C';

  if(/[a-z]/.test(code))return'B';

  return'A';

 }

 functionparseBarcode(barcode, barcodeType) {

  varbars = [];

  bars.add =function(nr) {

   varnrCode = 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(vari=0; i

   varcode = barcodeType=='C'? +barcode.substr(i++, 2) : barcode.charCodeAt(i);

   converted = fromType[barcodeType](code);

   if(isNaN(converted) || converted<0 || converted>106)thrownewError("Unrecognized character ("+code+") at position "+i+" in code '"+barcode+"'.");

   bars.add( converted );

  }

  bars.push(BARS[bars.check % 103], BARS[STOP]);

  returnbars;

 }

 varfromType = {

  A:function(charCode) {

   if(charCode>=0 && charCode<32)returncharCode+64;

   if(charCode>=32 && charCode<96)returncharCode-32;

   returncharCode;

  },

  B:function(charCode) {

   if(charCode>=32 && charCode<128)returncharCode-32;

   returncharCode;

  },

  C:function(charCode) {

   returncharCode;

  }

 };

 //--| Export

 exports.code128 = code128;

})();

/*

  showDiv:代表需要显示的divID,

  textVlaue : 代表需要生成的值,

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

*/

functioncreateBarcode(showDiv,textValue,barcodeType){

  vardivElement = document.getElementById(showDiv);

    divElement.innerHTML = code128(textValue,barcodeType);

}

 

2.css代码如下:

 

 代码如下 复制代码

.barcode {

 float:left;

 clear:both;

 padding:010px;/*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:1pxsolidblack; }

.barcode .bar2{border-left:2pxsolidblack; }

.barcode .bar3{border-left:3pxsolidblack; }

.barcode .bar4{border-left:4pxsolidblack; }

.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:010px;/*quiet zone*/

 overflow:auto;

 height:1in;/*size*/

}

.barcode2+ * {clear:both; }

.barcode2div {

 float:left;

 height:0.7in;/*size*/

}

.barcode2.bar1{border-left:2pxsolidblack; }

.barcode2.bar2{border-left:4pxsolidblack; }

.barcode2.bar3{border-left:6pxsolidblack; }

.barcode2.bar4{border-left:8pxsolidblack; }

.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}

.barcode2label {

 clear:both;

 display:block;

 text-align:center;

 font:0.250in/100%helvetica;/*size*/

}

 

3.html代码如下:

 

 代码如下 复制代码

 

  QR-Code Clock

  

  

    

(function(divId) {

 var divElement ,oldOnLoad = window.onload ;

 function getTimeString() {

  var pad = function(n) { return n <10? '0' + n.toString(10) : n.toString(10); }

    ,dt=newDate();

  return [pad(dt.getHours()), pad(dt.getMinutes()), pad(dt.getSeconds())].join(':');

 }

 function UpdateClock() {

  vartimeText=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');

  

 

 

  

   

   

 

 

运行效果图如下:

热门栏目