JS生成一维码(条形码)功能示例
作者:Joker_Ye 时间:2024-04-26 17:12:30
本文实例讲述了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>
运行效果图如下:
希望本文所述对大家JavaScript程序设计有所帮助。
标签:JS,一维码,条形码
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
在golang中操作mysql数据库的实现代码
2024-01-15 14:41:51
解决Python selenium get页面很慢时的问题
2022-08-29 02:08:22
![](https://img.aspxhome.com/file/2023/6/90596_0s.jpg)
Python制作一个多功能音乐播放器
2022-06-15 10:16:05
对mysql表进行优化、分析、检查和修复的说明
2010-04-22 16:28:00
mysql每半小时平均值计算的sql语句
2024-01-18 19:39:56
MySQL 8.0 之不可见列的基本操作
2024-01-18 17:32:41
W3C优质网页小贴士(四)
2008-04-17 13:34:00
SQL中的开窗函数详解可代替聚合函数使用
2024-01-20 08:03:24
![](https://img.aspxhome.com/file/2023/7/86877_0s.png)
django 多数据库及分库实现方式
2024-01-14 01:13:00
XML的简单读取与写入
2008-09-04 10:35:00
良好的css代码注释
2008-07-01 13:02:00
Python爬虫突破反爬虫机制知识点总结
2021-09-17 12:38:22
详解Python的迭代器、生成器以及相关的itertools包
2022-07-24 01:03:44
浅析vue-router原理
2023-07-02 17:09:19
![](https://img.aspxhome.com/file/2023/5/139955_0s.png)
Dreamweaver小技巧:超高速下载图像
2009-07-14 21:59:00
![](https://img.aspxhome.com/file/UploadPic/20072/20072311307259s.jpg)
python自动化测试selenium核心技术三种等待方式详解
2023-09-16 09:06:04
![](https://img.aspxhome.com/file/2023/0/95580_0s.png)
Python利用zhdate模块实现农历日期处理
2023-03-07 22:10:20
python3 拼接字符串的7种方法
2021-12-24 09:09:32
别开生面:纯CSS实现相册滑动浏览
2008-06-26 13:24:00
![](https://img.aspxhome.com/file/UploadPic/20086/26/2008626133524696s.jpg)
简单的命令查看安装的python版本号
2022-03-12 17:23:06
![](https://img.aspxhome.com/file/2023/8/88838_0s.png)