JavaScript를 사용한 간단한 바코드 생성기(무료 코드)
8533 단어 webdevhtmlbeginnersjavascript
이 간단한 바코드 생성기를 만드는 데 일부 기본 자바스크립트가 사용되었습니다. 기본적인 html css와 자바스크립트를 알고 있다면 이 자바스크립트 바코드를 만들 수 있습니다. Watch the live preview 작동 방식을 알아보십시오.
자바스크립트 바코드 스캐너를 만드는 방법에 대한 자습서를 이미 공유했습니다. 이제 JavaScript를 사용하여 자바스크립트 바코드 스캐너를 만들 차례입니다.
JavaScript 바코드 생성기
바코드는 모든 데이터를 시각적 또는 기계 판독 가능 형식으로 변환하는 데 사용할 수 있습니다. 바코드는 현재 많은 곳에서 특정 정보를 기계가 읽을 수 있는 형식으로 변환하는 데 사용됩니다.
여기에 html을 사용하여 이 Simple Barcode Generator의 기본 정보를 추가했습니다. 그런 다음 css를 사용하여 디자인합니다. 마지막으로 html 바코드 생성기가 JavaScript에 의해 활성화되었습니다.
바코드 생성기 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);
});
위의 코드를 사용하여 이 간단한 바코드 생성기를 만들 수 있기를 바랍니다.
문제가 있으면 댓글 부탁드립니다. this link에서 이 JavaScript 바코드 생성기의 모든 코드를 다운로드할 수 있습니다.
Reference
이 문제에 관하여(JavaScript를 사용한 간단한 바코드 생성기(무료 코드)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/groundtutorial/simple-barcode-generator-using-javascript-free-code-1oo텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
