Question

我正在尝试创建一个网页，我可以在该网页上批量创建QR码（它们最终将被打印在贴纸上并用作标签。）我希望能够创建由指定的QR码数量页面用户在“标签数量”输入字段下。例如，他们选择“五个”并单击“生成”按钮，它将生成五个QR码。到目前为止，我编写的代码只能生成一个QR码，而且我不确定如何编写必要的代码才能生成用户在网页上指定的代码量。如果有人有任何建议，我将非常感谢。如果您需要更多信息，请告诉我。预先谢谢你！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QR code generator</title>
<style>
  body { font-family: arial, sans-serif; }
  section {
    margin: 50px auto;
    max-width: 350px;
    text-align: center;
  }
  textarea {
    width: 50%;
    height: 50px;
    margin-bottom: 10px;
  }
  #size { max-width: 64px; }
  label {
  display: inline-block;
  width: 140px;
  text-align: left;
  .container {
  width: 500px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}
}
</style>
</head>
<body>
<section>
  <h1>QR Code Generator</h1>
  <p>Enter a URL or some text bellow and hit the Generate button (<kbd>Ctrl</kbd>+<kbd>Enter</kbd>)!</p>
  <textarea id="textarea" autofocus></textarea>
  <div class="block">
  <label for="size">Size (px):</label>
  <input align="left" id="size" type="number" value="150" min="50" max="500" step="50">
  <label for="amount">Amount of Labels:</label>
  <input align="left" id="amount" type="number" value="0" min="0" max="20" step="1">
  <button onclick="genQRcode()">Generate</button>
  </div>
  <div id="content" style="display: none;">
    <p><img id="qrcode" src="" /></p>
    <label for="qrcode-url">QR Code URL:</label>
    <input id="qrcode-url" type="text" onclick="this.select()">
  </div>
</section>
<script>
  var textarea = document.getElementById("textarea"),
    content = document.getElementById("content");

  function genQRcode() {
    var data = encodeURIComponent(textarea.value),
      size = document.getElementById("size").value,
      chart = "http://chart.googleapis.com/chart?cht=qr&chs=" + size + "x" + size + "&choe=UTF-8&chld=L|0&chl=" + data;
    if (data === "") {
      alert("Please enter valid data!");
      textarea.focus();
      content.style.display = "none";
    } else {
      content.style.display = "";
      document.getElementById("qrcode").src = chart;
      document.getElementById("qrcode-url").value = chart;
    }
  }

  document.addEventListener("keydown", function(e) {
    if (e.ctrlKey && e.keyCode == 13) {
      genQRcode();
    }
  });
</script>
</body>
</html>

Answer 1

在此示例中，使用html模板为qr代码创建显示...

<script id="template-qr-code" type="text/html">
  <p><img id="qrcode" src="{{src}}" /></p>
  <label for="qrcode-url-{{i}}">QR Code URL:</label>
  <input id="qrcode-url-{{i}}" type="text" onclick="this.select()" value="{{src}}" />
</script>

然后根据要创建的qr代码的数量，进行一个for循环，
相同的网址用于所有qr代码...

for (var i = 0; i < amount.value; i++) {
  var qrSrc = qrTemplate.innerHTML;
  qrSrc = qrSrc.replace(new RegExp('{{src}}', 'g'), chart);
  qrSrc = qrSrc.replace(new RegExp('{{i}}', 'g'), i);
  content.insertAdjacentHTML('beforeEnd', qrSrc);
}

请参阅以下工作片段...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QR code generator</title>
<style>
body { font-family: arial, sans-serif; }
section {
  margin: 50px auto;
  max-width: 350px;
  text-align: center;
}
textarea {
  width: 50%;
  height: 50px;
  margin-bottom: 10px;
}
#size { max-width: 64px; }
label {
  display: inline-block;
  width: 140px;
  text-align: left;
}
</style>
</head>
<body>
<section>
  <h1>QR Code Generator</h1>
  <p>Enter a URL or some text bellow and hit the Generate button (<kbd>Ctrl</kbd>+<kbd>Enter</kbd>)!</p>
  <textarea id="textarea" autofocus></textarea>
  <div class="block">
    <label for="size">Size (px):</label>
    <input align="left" id="size" type="number" value="150" min="50" max="500" step="50">
    <label for="amount">Amount of Labels:</label>
    <input align="left" id="amount" type="number" value="1" min="1" max="20" step="1">
    <button id="genQRcode">Generate</button>
  </div>
  <div id="content" style="display: none;"></div>
</section>
<script id="template-qr-code" type="text/html">
  <p><img id="qrcode" src="{{src}}" /></p>
  <label for="qrcode-url-{{i}}">QR Code URL:</label>
  <input id="qrcode-url-{{i}}" type="text" onclick="this.select()" value="{{src}}" />
</script>
<script>
window.addEventListener('load', function () {
  var textarea = document.getElementById("textarea"),
    content = document.getElementById("content"),
    amount = document.getElementById("amount"),
    qrTemplate = document.getElementById('template-qr-code');

  function genQRcode() {
    var data = encodeURIComponent(textarea.value),
      size = document.getElementById("size").value,
      chart = "http://chart.googleapis.com/chart?cht=qr&chs=" + size + "x" + size + "&choe=UTF-8&chld=L|0&chl=" + data;
    if (data === "") {
      alert("Please enter valid data!");
      textarea.focus();
      content.style.display = "none";
    } else {
      for (var i = 0; i < amount.value; i++) {
        var qrSrc = qrTemplate.innerHTML;
        qrSrc = qrSrc.replace(new RegExp('{{src}}', 'g'), chart);
        qrSrc = qrSrc.replace(new RegExp('{{i}}', 'g'), i);
        content.insertAdjacentHTML('beforeEnd', qrSrc);
      }
      content.style.display = "";
    }
  }

  document.getElementById("genQRcode").addEventListener("click", genQRcode);

  document.addEventListener("keydown", function(e) {
    if (e.ctrlKey && e.keyCode == 13) {
      genQRcode();
    }
  });
});
</script>
</body>
</html>

批量创建标签的QR码

1 个答案: