使用JavaScript实现一个简单的二维码生成器_javascript工具

首先引入qrcode.js库，再创建div容器用于显示二维码，接着通过new QRCode()生成固定内容二维码，然后结合input输入框和按钮实现动态生成，最后可添加CSS样式美化显示效果。

要使用 JavaScript 实现一个简单的二维码生成器，可以借助现有的开源库 qrcode.js，它轻量、无需依赖，并且兼容性好。下面是一个完整的实现步骤和示例代码。

1. 引入 qrcode.js 库

<script src="https://cdn.jsdelivr.net/npm/qrcode.js/lib/qrcode.min.js"></script>

uBrand Logo生成器

uBrand Logo生成器是一款强大的AI智能LOGO设计工具。

57

查看详情

2. 创建用于渲染二维码的容器

<div id="qrcode"></div>

3. 使用 JavaScript 生成二维码

const qrcode = new QRCode("qrcode", {
  text: "https://example.com",
  width: 128,
  height: 128,
  colorDark: "#000000",
  colorLight: "#ffffff",
  correctLevel: QRCode.CorrectLevel.H
});

4. 动态更新二维码内容

<input type="text" id="text" placeholder="输入内容" />
<button onclick="makeCode()">生成二维码</button>

function makeCode() {
  const inputValue = document.getElementById("text").value;
  if (!inputValue) return;
  const qrcodeDiv = document.getElementById("qrcode");
  qrcodeDiv.innerHTML = "";
  new QRCode(qrcodeDiv, {
    text: inputValue,
    width: 128,
    height: 128,
    correctLevel: QRCode.CorrectLevel.H
  });
}

5. 可选：添加样式美化显示效果

#qrcode {
  margin-top: 20px;
  text-align: center;
}
#qrcode canvas {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

以上就是使用JavaScript实现一个简单的二维码生成器_javascript工具的详细内容，更多请关注php中文网其它相关文章！