如何用 JavaScript 制作二维码生成器

说实话，制作二维码生成器非常简单，因为互联网上已经有现成的材料了。

本博客的源代码
试用我们将在本博客中制作的 QRCODE 生成器

    <input type="text" onchange="generateQR()" id="url" 
    placeholder="Place Your Url">
    <button id="makeQR">
        Generate QR Code
    </button>
    <div id="output"></div>
    <script src="qrcode.min.js"></script>
    <script src="main.js"></script>

let qrcode = new QRCode(document.getElementById('output'));
let qrdata = document.getElementById('url');
let makeQr = document.getElementById('makeQR')

function generateQR() {
    var data = qrdata.value;
    qrcode.makeCode(data)
}

makeQr.addEventListener('click', function() {
    generateQR()
})

好的，这就是您需要理解的所有代码。

首先，你必须从https://davidshimjs.github.io/qrcodejs/下载这个，这是不需要下载的，因为基础代码不是我的，而是这个人编写的。

好的，现在我们首先要制作 html

    <input type="text" onchange="generateQR()" id="url" 
    placeholder="Place Your Url">
    <button id="makeQR">
        Generate QR Code
    </button>
    <div id="output"></div>
    <script src="qrcode.min.js"></script>
    <script src="main.js"></script>

首先，我们创建一个输入框，并赋予它 onchange="generateOR()" ，这是我们在 main.js 中创建的函数，同时赋予它一个 ID。
然后我们创建一个按钮，也赋予它一个 ID。
现在我们制作一个

let qrcode = new QRCode(document.getElementById('output'));
let qrdata = document.getElementById('url');
let makeQr = document.getElementById('makeQR')

function generateQR() {
    const data = qrdata.value;
    qrcode.makeCode(data)
}

makeQr.addEventListener('click', function() {
    generateQR()
})

好的，在前三行中，我们只是通过使用 document.getElementById 导入我们在 html 中给出的所有 id。

let qrcode = new QRCode(document.getElementById('output'));

在这一行中，我们正在制作一个新的 QRCode，这很重要，因为 qrcode.min.js 中有一些东西，所以如果我们在导入 div 时写入新的 QRCode，那么它将自动发现这是 div，它将显示生成的 qr。

function generateQR() {
    const data = qrdata.value;
    qrcode.makeCode(data)
}

这里我们创建generateOR函数（用于html）并创建一个名为data的const并获取qrdata.value（该输入框的值）最后我们添加qrcode.makeCode（data）（qrcode是那个div）并且makeCode表示生成二维码和（data）表示qrdata.value（输入框的值）

如果我们输入链接并按下回车键，这段代码现在应该也能工作了，但如果您希望二维码在我们点击按钮时也显示出来，那么

makeQr.addEventListener('click', function() {
    generateQR()
})

这里我们做的不多，只是添加一个事件监听器“click”，并在其中传递generateOR()函数

感谢您阅读到最后，您可以在 GitHub 上关注我并关注此 repo