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中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
详细分析vue响应式原理
Jun 22 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 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+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
10条PHP编程习惯助你找工作
2008/09/29 PHP
CURL状态码列表(详细)
2013/06/27 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
编程语言Python的发展史
2014/09/26 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
Pandas的Apply函数具体使用
2020/07/21 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
电子信息科学专业自荐信
2014/01/30 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
2014年质检工作总结
2014/11/26 职场文书
实习生个人总结范文
2015/02/28 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书