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 相关文章推荐
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 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
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
php控制文件下载速度的方法
2015/03/24 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
python strip()函数 介绍
2013/05/24 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
python学生信息管理系统(初级版)
2018/10/17 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
生物技术研究生自荐信
2013/11/12 职场文书
优秀实习生感言
2014/03/01 职场文书
财务担保书范文
2014/04/02 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript