Hỗ trợ
Thanh toán
Tuyển dụng
Liên hệ
Trang chủ » HTML - CSS - Jquery » Hướng dẫn tạo QR Code Sử Dụng HTML, CSS Và Javascript
HTML - CSS - Jquery
Hướng dẫn tạo QR Code Sử Dụng HTML, CSS Và Javascript
12/08/2023
Hiện tại QR Code được ứng dụng rất nhiều trong cuộc sống hàng ngày của chúng ta, vì sự nhanh chóng đáp ứng của nó. Ví dụ sử dụng điện thoại muốn truy cập vào website bán một món hàng để tra cứu thông tin, thay vì phải gõ một đường dẫn rất dài trên điện thoại, các hãng có thể cung cấp 1 QR Code dán lên sản phẩm là đường dẫn đến trang web. hoặc là việc thanh toán các hóa đơn bằng smartphone qua mã qr trên các ứng dụng ngân hàng rất tiện lợi và nhanh chóng.
QR Code là viết tắt của Quick Response Code cũng giống như mã vạch, QRCode có tác dụng lưu trữ các thông tin thông qua một hình ảnh. Từ đó dùng các thiết bị có khả năng đọc mã đó và phân tích thông tin trên mã để trả về các thông tin.
Để tạo QR Code bằng HTML, CSS và JavaScript, bước đầu tiên chúng ta sẽ xây dựng một trang web đơn giản với một ô nhập liệu để người dùng nhập thông tin cần mã hóa. Sau đó, thông qua JavaScript, chúng ta sử dụng thư viện mã nguồn mở để tạo mã QR Code và hiển thị nó trực tiếp trên trang web.
Cấu trúc của trang HTML sẽ như sau:
Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tạo Mã QR Code</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wapper">
<h1>Tạo Mã QR Code</h1>
<input type="text" class="qr_text" id="qr_text" placeholder="Nhập text hoặc URL" />
<label for="sizes">Lựa chọn kích thước</label>
<select id="sizes">
<option value="100">100x100</option>
<option value="200">200x200</option>
<option value="300">300x300</option>
<option value="400">400x400</option>
<option value="500">500x500</option>
<option value="600">600x600</option>
<option value="700">700x700</option>
<option value="800">800x800</option>
<option value="900">900x900</option>
<option value="1000">1000x1000</option>
</select>
<div class="body-qr"></div>
<div class="footer-qr">
<a href="" id="generate">Tạo QR Code</a>
<a href="" id="download" download="QR_Code.png">Tải về</a>
</div>
</div>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</body>
</html>
Code CSS
:root{
--bcg-color:#001122;
--primary-color:#155e75;
--border-radius:8px;
--secondary-color:#fff;
--border-color:#7fb7c9;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
margin: 0px;padding: 0px;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
background-color: #7fb7c9;
align-items: center;
}
.wapper{
background-color: aqua;
padding: 30px;
width: 400px;
border-radius: var(--border-radius);
min-height: 300px;
height: auto;
}
.wapper h1{
font-size: 25px;
text-align: center;
color: var(--secondary-color);
margin-bottom: 20px;
text-transform: uppercase;
}
.wapper input{
width: 100%;
margin-block: 12px;
}
.wapper input,select{
padding: 8px;
border-radius: var(--border-radius);
font-size: 18px;
outline: none;
border: 2px solid var(--border-color);
}
.wapper label{
color: var(--secondary-color);
font-size: 20px;
}
.wapper div{
display: flex;
justify-content: space-between;
}
.footer-qr{
display: flex;
justify-content: center;
margin-top: 15px;
}
.footer-qr a{
background-color: var(--secondary-color);
text-decoration: none;
font-size: 20px;
padding: 15px 35px;
margin-inline: 2px;
color: var(--primary-color);
font-weight: 600px;
border-radius: var(--border-radius);
}
.qr-body{
display: grid;
place-items: center;
padding: 20px;
}
.qr-body img{
max-width: 100%;
max-height: 100%;
margin-block: 10px;
padding: 20px;
border: solid 0.5px var(--border-color);
}
@media screen and (max-width:520px){
.box{
width: 80%;
}
.qr-footer a{
padding: 12px;
font-size: 16px;
}
}
Code Javascript
const qrText=document.getElementById('qr_text');
const sizes=document.getElementById('sizes');
const generate=document.getElementById('generate');
const download=document.getElementById('download');
const qrcodebox=document.querySelector('.body-qr');
let size = sizes.value;
generate.addEventListener('click',(e)=>{
e.preventDefault();
isEmptyInput();
});
sizes.addEventListener('change',(e)=>{
size=e.target.value;
isEmptyInput();
});
download.addEventListener('click',()=>{
let img=document.querySelector('.body-qr img');
if(img !== null){
let imgAtrr=img.getAttribute('src');
download.setAttribute("href",imgAtrr);
}
});
function isEmptyInput(){
qrText.value.length>0?generateQRCode():alert('Vui lòng nhập văn bản hoặc URL để tạo QR Code');
}
function generateQRCode(){
qrcodebox.innerHTML = "";
new QRCode(qrcodebox, {
text:qrText.value,
height:size,
width:size,
colorLight:"#fff",
colorDark:"#000",
});
}
Video hướng dẫn
Cách tạo QR Code sử dụng HTML, CSS và Javascript
Trên đây là chi tiết các bước hướng dẫn các bạn cách tạo QRCode sử dụng HTML, CSS và Javascript. Hy vọng bài viết sẽ hữu ích với các bạn. Các bạn có thể click link bên dưới để tải Source Code về để tham khảo các bạn nhé.
Bài viết liên quan
14:16 . 07/03/2024
12:02 . 17/12/2023
21:27 . 05/09/2023
15:47 . 03/09/2023
.jpg)
21:16 . 18/08/2023
20:51 . 29/06/2023
11:04 . 25/06/2023
15:04 . 08/07/2022
06:17 . 03/06/2022
