使用 JavaScript 和 CSS 的二维码生成器（免费代码）

在本文中，您将学习如何使用 HTML CSS和 JavaScript 创建 QR 码生成器。

 

如果您了解基本的 JavaScript，您可以轻松创建一个简单的二维码生成器。您可以关注我们的其他站点Tech Virtual以创建更多其他类型的二维码生成器。

QR码是一种矩阵条码，目前几乎用于所有数字支付和产品。实际上，它是一种机器可读的光学标签，包含了一些关于产品的特殊信息。

网上有很多这样的QRcode js例子。但在这里我已经分享了完整的教程，并试图一步一步地向你解释如何使用 JavaScript 创建一个 QR 码生成器。

这个HTML QR 代码生成器是以一种非常简单的方式创建的。您可以在此处创建任何文本或链接的矩阵条形码。

如果您不明白我在说什么，并且想获得该项目的现场演示，请使用下面的演示。

创建一个 HTML 文件并添加以下结构：
 

            
QR Code Generator
            

                

                

                    

                

                Generate QR Code

            
        

添加以下 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 代码来控制步进栏行为：

 

希望以上教程已帮助您了解此HTML QR 代码生成器的工作原理。 在这里，我们学习了如何创建二维码生成器。下次我准备写一篇可以扫描二维码的文章。请评论您对这个 javascript QR 码生成器的喜爱程度。