时间戳

首页 > 解决方案 > 批量创建标签二维码

javascript - 批量创建标签二维码

问题描述

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

<!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>

标签： javascripthtmlgoogle-visualization

解决方案

在此示例中，使用 html 模板创建二维码的显示... 

<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>

然后是一个for循环，根据要创建的二维码数量，
所有二维码使用相同的 url... 

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>

推荐阅读