博客

使用HTML、CSS和jQuery生成QR码

  • Post category:jquery

使用HTML、CSS和jQuery生成QR码可以分为以下几步：

第一步：添加必须的库

要生成QR码，我们需要用到两个JavaScript库：qrcode.min.js和jquery.min.js。它们可以从它们官方网站下载得到。将这两个库添加到你的HTML文件的标签中：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

第二步：创建一个空的div

在HTML文件中创建一个空的div用于显示生成的QR码：

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

第三步：编写JavaScript代码

用jQuery选择生成QR码的div，然后使用QRCode库的构造函数创建QRCode对象。QRCode可以根据字符串生成QR码。在这个例子中，我们生成的是URL https://www.baidu.com 作为QR码的内容。最后，使用QRCode对象的makeCode()方法，将QR码嵌入到div中：

$(document).ready(function(){
  var qrcode = new QRCode("qrcode");
  qrcode.makeCode("https://www.baidu.com");
});

示例一：自定义颜色和大小

使用QRCode库还可以自定义QR码的颜色和大小。在下面的例子中，QR码的大小是150x150px，背景是白色，前景（QR码的线）是黑色：

$(document).ready(function(){
  var options = {
    text: "https://www.baidu.com",
    width: 150,
    height: 150,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
  };
  var qrcode = new QRCode("qrcode", options);
});

示例二：使用文本框输入QR码内容

在下面的例子中，用户可以通过文本框输入QR码的内容，然后点击“生成QR码”按钮，QR码就会显示在页面上：

<input id="qrcode-text" type="text" placeholder="输入QR码内容">
<button id="qrcode-btn">生成QR码</button>
<div id="qrcode"></div>

<script>
$(document).ready(function(){
  $("#qrcode-btn").click(function(){
    var text = $("#qrcode-text").val();
    var options = {
      text: text,
      width: 150,
      height: 150,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel : QRCode.CorrectLevel.H
    };
    $("#qrcode").html("");
    var qrcode = new QRCode("qrcode", options);
  });
});
</script>

在这个例子中，我们首先获取用户在文本框中输入的QR码的内容。然后使用QRCode库和一些用户定义的选项生成QR码，最后在页面上显示QR码。

希望这个攻略对你有所帮助！

Tags: