[JS] QR코드 만들기

qrcode.js로 QR코드 만들기

qrcode.js는 내가 원하는 자료를 qr로 바꿔주는 스크립트 이다.

코로나 시대가 되면서 qr체크인을 하면서

많은 사람들이 qr코드를 접하고 사용하고 있다

QR코드의 사용 예

1.전자출입명부

2.로또 정보 스캔

3.결제 시스템

qr코드 만들기

qrcode.js사용법 및 설명

[html]

<head>
<script type="text/javascript" src="jquery.min.js"></script>
//※↓↓필수 스크립트
<script type="text/javascript" src="qrcode.js"></script>
</head>
<body>
//자료를 넣을 input:text
<input id="text" type="text" value="" style="width:100%" /><br />

//qr코드를 보여주는 div
<div id="qrcode" style="width:100px; height:100px; margin:auto; margin-top:15px;"></div>
</body>

//qr코드 생성 
var qrcode = new QRCode(document.getElementById("qrcode"), {
	//가로, 세로 높이 조절
	width : 100,
	height : 100
});

//input:text에 들어있는 value를 qr코드로 바꿔주는 function
function makeCode () {		
	var elText = document.getElementById("text");
	
	if (!elText.value) {
		alert("Input a text");
		elText.focus();
		return;
	}
	
	qrcode.makeCode(elText.value);
}

//위에 만든 function 실행
makeCode();

//텍스트 이벤트 감지
$("#text").
	on("blur", function () {
		makeCode();
	}).
	on("keydown", function (e) {
		if (e.keyCode == 13) {
			makeCode();
		}
	});

See the Pen Cross-browser QRCode by Sangmin, Shim (@davidshimjs) on CodePen.

첨부 파일

(참고자료 사이트에서 받을수도 있다)

qrcodejs-master.zip

0.05MB

참고 자료

davidshimjs.github.io/qrcodejs/

저작자표시

'웹언어 > JavaScript' 카테고리의 다른 글

[JS] 프로그래스 조절 (2)	2021.04.12
[JS] 책 넘기는 효과 turn.js (2)	2021.04.07
[JS] 초를 시:분:초 로 바꿔주는 함수 (0)	2021.03.31
[JS] swiper.js / swiper슬라이드 (2)	2021.03.23
[JS] 스크롤바 퍼센트 구하기 (0)	2021.03.19