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 相关文章推荐
jquery 分页控件实现代码
Nov 30 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
koa-router源码学习小结
Sep 07 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 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数据的三种方法
2008/06/05 PHP
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
非常好的js代码
2006/06/27 Javascript
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
js中的面向对象入门
2017/03/06 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
React实现todolist功能
2020/12/28 Javascript
Python实现单词拼写检查
2015/04/25 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Python全排列操作实例分析
2018/07/24 Python
python sorted方法和列表使用解析
2019/11/18 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
请说出几个常用的异常类
2013/01/08 面试题
.NET remoting中对象激活的两种方式
2015/06/08 面试题
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
车间班长岗位职责
2013/11/30 职场文书
旷课检讨书1000字
2014/02/14 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
工作迟到检讨书范文
2015/05/06 职场文书