2023-07-06T14:34:40.png

<!DOCTYPE html>
<html>
<head>
  <title>生成二维码</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
  <input type="text" id="inputText" placeholder="请输入内容">
  <button onclick="generateQRCode()">生成二维码</button>
  <div id="qrcode"></div>
  <div id="buttons"></div>

  <script>
    function generateQRCode() {
      var inputText = document.getElementById("inputText").value;
      var qrcodeDiv = document.getElementById("qrcode");
      var buttonsDiv = document.getElementById("buttons");

      // 清空之前的二维码和按钮
      qrcodeDiv.innerHTML = "";
      buttonsDiv.innerHTML = "";

      if (inputText.trim() === "") {
        alert("请输入内容");
        return;
      }

      var qrcode = new QRCode(qrcodeDiv, {
        text: inputText,
        width: 128,
        height: 128
      });

      // 创建下载按钮
      var downloadBtn = document.createElement("a");
      downloadBtn.href = qrcodeDiv.firstChild.toDataURL();
      downloadBtn.download = "qrcode.png";
      downloadBtn.innerHTML = "下载二维码";

      // 创建关闭按钮
      var closeBtn = document.createElement("button");
      closeBtn.innerHTML = "关闭二维码";
      closeBtn.onclick = function() {
        qrcodeDiv.innerHTML = "";
        buttonsDiv.innerHTML = "";
      };

      buttonsDiv.appendChild(downloadBtn);
      buttonsDiv.appendChild(closeBtn);
    }
  </script>
</body>
</html>