时间：2021-07-01 10:21:17 帮助过：9人阅读
本文实例讲述了JS生成一维码(条形码)功能的方法。分享给大家供大家参考，具体如下：
1、js代码：
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 p {
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 p {
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(pId) {
var pElement ,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();
pElement.innerHTML = code128(timeText);
}
window.onload = function() {
pElement = document.getElementById(pId);
UpdateClock();
setInterval(UpdateClock, 1000);
if (typeof oldOnLoad == 'function') oldOnLoad.apply(this, arguments);
}
})('p1');
</script>
</head>
<body>
<input type="button" value ="生成" onclick="createBarcode('p128','12345678','B');"/>
<p class="barcode2" id="p128"></p>
<p class="barcode2" id="p1"></p>
</body>
</html>运行效果图如下：
以上就是JS生成条形码功能示例代码的详细内容，更多请关注Gxl网其它相关文章！