JS生成一维码(条形码)功能示例


Posted in Javascript onJanuary 19, 2017

本文实例讲述了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=='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代码如下:

.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>
 <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','12345678','B');"/>
   <div class="barcode2" id="div128"></div>
   <div class="barcode2" id="div1"></div>
 </body>
</html>

运行效果图如下:

JS生成一维码(条形码)功能示例

更多关于JavaScript相关内容可查看本站专题:《javascript编码操作技巧总结》、《JavaScript加密解密技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
JavaScript常用工具函数库汇总
Sep 17 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 #Javascript
javascript中json基础知识详解
Jan 19 #Javascript
JavaScript实现垂直滚动条效果
Jan 18 #Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 #Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 #Javascript
基于JavaScript实现窗口拖动效果
Jan 18 #Javascript
原生js实现节日时间倒计时功能
Jan 18 #Javascript
You might like
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
ini_set的用法介绍
2014/01/07 PHP
PHP微信支付实例解析
2016/07/22 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
深入理解js中this的用法
2016/05/28 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python zip文件 压缩
2008/12/24 Python
Python自动连接ssh的方法
2015/03/07 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
Python数据正态性检验实现过程
2020/04/18 Python
哪些是python中web开发框架
2020/06/17 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
广州盈通面试题
2015/12/05 面试题
无故旷工检讨书
2014/01/26 职场文书
运动会通讯稿100字
2014/01/31 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
导师鉴定意见
2015/06/05 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
mysqldump进行数据备份详解
2022/07/15 MySQL