在本文中，您将学习如何使用 HTML CSS和 JavaScript 创建 QR 码生成器。
如果您了解基本的 JavaScript，您可以轻松创建一个简单的二维码生成器。您可以关注我们的其他站点Tech Virtual以创建更多其他类型的二维码生成器。
QR码是一种矩阵条码，目前几乎用于所有数字支付和产品。实际上，它是一种机器可读的光学标签，包含了一些关于产品的特殊信息。
网上有很多这样的QRcode js例子。但在这里我已经分享了完整的教程，并试图一步一步地向你解释如何使用 JavaScript 创建一个 QR 码生成器。
这个HTML QR 代码生成器是以一种非常简单的方式创建的。您可以在此处创建任何文本或链接的矩阵条形码。
如果您不明白我在说什么，并且想获得该项目的现场演示，请使用下面的演示。
创建一个 HTML 文件并添加以下结构：
<div class="form"><h1>QR Code Generator</h1><form><input type="url" id="website" name="website" placeholder="" required /><div id="qrcode-container"><div id="qrcode" class="qrcode"></div></div><button type="button" onclick="generateQRCode()">Generate QR Code</button></form></div>
添加以下 CSS 来设置步进栏的样式：
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;}
添加 JavaScript 代码来控制步进栏行为：
<script src="/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script><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>
希望以上教程已帮助您了解此HTML QR 代码生成器的工作原理。 在这里，我们学习了如何创建二维码生成器。下次我准备写一篇可以扫描二维码的文章。请评论您对这个 javascript QR 码生成器的喜爱程度。
