JS生成條形碼功能示例代碼

來源：懂視網責編：小采時間：2020-11-27 20:22:59

JS生成條形碼功能示例代碼

JS生成條形碼功能示例代碼:這篇文章主要介紹了JS生成一維碼(條形碼)功能,結合完整實例形式分析了JS插件生成條形碼的具體步驟與相關操作技巧,需要的朋友可以參考下本文實例講述了JS生成一維碼(條形碼)功能的方法。分享給大家供大家參考，具體如下：1、js代碼：(function() { i

推薦度：

點擊下載本文 文檔為doc格式

導讀JS生成條形碼功能示例代碼:這篇文章主要介紹了JS生成一維碼(條形碼)功能,結合完整實例形式分析了JS插件生成條形碼的具體步驟與相關操作技巧,需要的朋友可以參考下本文實例講述了JS生成一維碼(條形碼)功能的方法。分享給大家供大家參考，具體如下：1、js代碼：(function() { i

這篇文章主要介紹了JS生成一維碼(條形碼)功能,結合完整實例形式分析了JS插件生成條形碼的具體步驟與相關操作技巧,需要的朋友可以參考下

本文實例講述了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>

運行效果圖如下：