原始地址：https://dev.to/groundtutorial/simple-barcode-generator-using-javascript-free-code-1oo
在本教程中，您将学习如何使用html css和javascript创建javascript条码生成器。我之前与您分享了如何创建QR代码生成器。
这个简单的条码生成器使用了一些基本的javascript。如果您了解基本的html、css和javascript，那么您可以创建这个javascript条码。观看实时预览以了解其工作原理。
我已经分享了一个关于如何创建javascript条码扫描器的教程。现在是使用JavaScript创建JavaScript条码扫描器的时候了。
document.getElementById("btn").addEventListener("click", () => {
let text = document.getElementById("text").value;
JsBarcode("#barcode", text);
});
希望您能够使用上述代码创建这个简单的条码生成器。
如果有任何问题，请评论。您可以通过此链接下载JavaScript条码生成器的所有代码。
JavaScript条码生成器
条形码可以用于将任何数据转换为可视或可机器读取的形式。条形码现在在许多地方用于将特定信息转换为可机器读取的形式。
在这里，我已经添加了使用html的简单条码生成器的基本信息。然后使用css进行设计。最后，通过JavaScript激活了html条码生成器。
条码生成器HTML代码
以下信息已经使用html添加到这个条码生成器中。复制以下html代码并将其添加到您的html文件中。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.3/JsBarcode.all.min.js"></script>
</head>
<body>
<div class="content">
<input type="text" id="text">
<svg id="barcode"></svg>
<button id="btn">Generate</button>
</div>
</body>
</html>
条码生成器的CSS代码
现在是使用一些css设计这个html条码生成器的时候了。下面是所有的css代码。复制这些代码并将其添加到您的css文件中。
body{
background-color: rgb(3, 138, 210);
}
.content{
width: 350px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
padding: 20px;
text-align: center;
}
input{
width: 328px;
padding: 15px 10px;
border: 1.5px solid rgb(52, 51, 51);
font-size: 17px;
outline: none;
}
input:focus{
border: 1.7px solid rgb(4, 84, 213);
}
#barcode{
box-shadow: 0 0 20px rgba(0,139,253,0.25);
width: 300px;
margin: 30px 0px 30px 0px;
}
#btn{
padding: 12px 40px;
background-color: rgb(2, 103, 66);
color: #fff;
font-size: 17px;
border: none;
border-radius: 3px;
}
条码生成器的JavaScript代码
现在我们需要添加一些JavaScript来激活条码生成器。使用jsbarcode js cdn链接来激活生成器。
document.getElementById("btn").addEventListener("click", () => {
let text = document.getElementById("text").value;
JsBarcode("#barcode", text);
});
希望您能够使用以上代码创建这个简单的条码生成器。
如果有任何问题，请评论。您可以通过此链接下载JavaScript条码生成器的所有代码。
4899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
