Hướng dẫn
Quảng cáo

Trình tạo mã QR bằng JavaScript & CSS

Trong bài viết này, bạn sẽ được hướng dẫn cách tạo trình tạo mã QR bằng JavaScript

Nếu bạn biết JavaScript cơ bản, bạn có thể dễ dàng tạo Javascript tạo mã QR đơn giản. Sau đây tôi sẽ hướng dẫn bạn một cách đơn giản để tạo mã QR sử dụng thư viện QRcode js

Mã QR là gì?

Mã QR là một loại mã vạch ma trận hiện đang được sử dụng trong hầu hết các sản phẩm và thanh toán kỹ thuật số. Trên thực tế, đó là một nhãn quang học có thể đọc được bằng máy có chứa một số thông tin đặc biệt về sản phẩm.

Trình tạo mã QR JavaScript là gì?

Có rất nhiều ví dụ về QRcode js trên internet. Nhưng ở đây tôi đã chia sẻ hướng dẫn đầy đủ và cố gắng giải thích cho bạn từng bước cách tạo trình tạo mã QR bằng JavaScript .

Trình tạo mã QR bằng JavaScript này đã được tạo theo một cách rất đơn giản. Tại đây, bạn có thể tạo mã vạch ma trận của bất kỳ văn bản hoặc liên kết nào.

Nhiều người nghĩ rằng rất khó để tạo ra loại trình tạo mã QR javascript thuần túy này. Trên thực tế, nó không phải là quá khó. Bạn có thể dễ dàng tạo nếu bạn biết cơ bản bản HTML, CSS và javascript.

Cách tạo trình tạo mã QR trong JavaScript

Để có thể có mã QR thì đầu tiên ta cần nhập dữ liệu, do đó ta dùng HTML và CSS để tạo một form nhập liệu cùng hiển thị mã QR sau khi tạo được. Sau đó dùng javascript và thư viện QRcode js để tạo mã QR.

Sau đây là các bước chi tiết để tạo trình tạo mã QR

Bước 1: Mã HTML

Sử dụng mã HTML sau để tạo khung nhập liệu và hiển thị mã QR

Ví dụ

<div class="form">
  <h1>QR Code Generator</h1>
  <form>
  <!-- nhập dữ liệu -->
    <input type="url" id="website" name="website" placeholder="https://vzn.vn" required />
<!-- Hiển thị mã QR -->
    <div id="qrcode-container">
        <div id="qrcode" class="qrcode"></div>
    </div>
<!-- nút bấm thực hiện tạo mã QR -->
    <button type="button" onclick="generateQRCode()">Generate QR Code</button>
    
</form>
</div>

Bước 2: Mã CSS

Ví dụ

body{
    background: rgb(200, 220, 224);
}
        .form {
  font-family: Helvetica, sans-serif;
  max-width: 400px;
  margin: 100px auto;
  text-align: center;
  padding: 16px;
  background: #ffffff;
}
.form h1 {
  background: #03773f;
  padding: 20px 0;
  font-weight: 300;
  text-align: center;
  color: #fff;
  margin: -16px -16px 16px -16px;
  font-size:  25px;
}
.form input[type="text"],
.form input[type="url"] {
  box-sizing: border-box;
  width: 100%;
  background: #fff;
  margin-bottom: 4%;
  border: 1px solid #ccc;
  padding: 4%;
  font-size: 17px;
  color: rgb(9, 61, 125);
}
.form input[type="text"]:focus,
.form input[type="url"]:focus {
  box-shadow: 0 0 5px #5868bf;
  padding: 4%;
  border: 1px solid #5868bf;
}

.form button {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 180px;
  margin: 0 auto;
  padding: 3%;
  background: #0853b6;
  border: none;  
  border-radius: 3px;
  font-size: 17px;
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
  color: #fff;
  cursor: pointer;
}
.form button:hover {
  background: rgba(88,104,191, 0.5);
}
#qrcode-container{
    display:none;
}

.qrcode{
  padding: 16px;
  margin-bottom: 30px;
}
.qrcode img{
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(67, 67, 68, 0.25);
  padding: 4px;
}

Bước 3: Mã JS để tạo mã QR

Chèn tệp tin js sau vào trước thẻ </header>

Ví dụ

<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>

Thêm mã JS sau trước thẻ </body>

Ví dụ

<script type="text/javascript">
    function generateQRCode() {
      let website = document.getElementById("website").value;
      if (website) {
        let qrcodeContainer = document.getElementById("qrcode");
        qrcodeContainer.innerHTML = "";
        new QRCode(qrcodeContainer, website);
 
        document.getElementById("qrcode-container").style.display = "block";
      } else {
        alert("Please enter a valid URL");
      }
    }
  </script>

Code mẫu đầy đủ của trình tạo mã QR bằng Javascript

Đây là mã đầy đủ của hướng dẫn trên

Ví dụ

<!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>Trình tạo mã </title>
    <style>
body{
    background: rgb(200, 220, 224);
}
        .form {
  font-family: Helvetica, sans-serif;
  max-width: 400px;
  margin: 100px auto;
  text-align: center;
  padding: 16px;
  background: #ffffff;
}
.form h1 {
  background: #03773f;
  padding: 20px 0;
  font-weight: 300;
  text-align: center;
  color: #fff;
  margin: -16px -16px 16px -16px;
  font-size:  25px;
}
.form input[type="text"],
.form input[type="url"] {
  box-sizing: border-box;
  width: 100%;
  background: #fff;
  margin-bottom: 4%;
  border: 1px solid #ccc;
  padding: 4%;
  font-size: 17px;
  color: rgb(9, 61, 125);
}
.form input[type="text"]:focus,
.form input[type="url"]:focus {
  box-shadow: 0 0 5px #5868bf;
  padding: 4%;
  border: 1px solid #5868bf;
}

.form button {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 180px;
  margin: 0 auto;
  padding: 3%;
  background: #0853b6;
  border: none;  
  border-radius: 3px;
  font-size: 17px;
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
  color: #fff;
  cursor: pointer;
}
.form button:hover {
  background: rgba(88,104,191, 0.5);
}
#qrcode-container{
    display:none;
}

.qrcode{
  padding: 16px;
  margin-bottom: 30px;
}
.qrcode img{
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(67, 67, 68, 0.25);
  padding: 4px;
}

    </style>
    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
</head>
<body>
    

<div class="form">
  <h1>QR Code Generator</h1>
  <form>
  <!-- nhập dữ liệu -->
    <input type="url" id="website" name="website" placeholder="https://vzn.vn" required />
<!-- Hiển thị mã QR -->
    <div id="qrcode-container">
        <div id="qrcode" class="qrcode"></div>
    </div>
<!-- nút bấm thực hiện tạo mã QR -->
    <button type="button" onclick="generateQRCode()">Generate QR Code</button>
    
</form>
</div>
  <script type="text/javascript">
    function generateQRCode() {
      let website = document.getElementById("website").value;
      if (website) {
        let qrcodeContainer = document.getElementById("qrcode");
        qrcodeContainer.innerHTML = "";
        new QRCode(qrcodeContainer, website);
 
        document.getElementById("qrcode-container").style.display = "block";
      } else {
        alert("Please enter a valid URL");
      }
    }
  </script>
</body>
</html>

Hy vọng bài viết đã giúp bạn tìm được cách tạo mã QR nhanh và đơn giản với Javascript

Bài viết này đã giúp ích cho bạn?

Bài viết mới

Advertisements