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 相关文章推荐
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
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中intval()等int转换时的意外异常情况
2013/06/21 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
javascript 尚未实现错误解决办法
2008/11/27 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
Python数据类型学习笔记
2016/01/13 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
python单例模式实例解析
2018/08/28 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
村官工作鉴定评语
2014/01/27 职场文书
公司营业员的自我评价
2014/03/04 职场文书
超市活动计划书
2014/04/24 职场文书
中学生运动会口号
2014/06/07 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
Java异常处理try catch的基本用法
2021/12/06 Java/Android
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js