11行JS代码制作二维码生成功能

当我们想要在网页上制作二维码时，可以使用JavaScript编写11行代码来实现，下面是详细步骤：

1. 引入Qrcode.js库

我们需要使用Qrcode.js库来生成二维码，因此首先需要将该库引入网页中。

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

2. HTML结构

接下来，我们需要在HTML中添加一个用于存放二维码的容器，例如：

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

3. 创建Qrcode实例

在JavaScript中，我们需要创建一个Qrcode实例，来实现生成二维码的功能。代码如下：

var qrcode = new QRCode(document.getElementById("qrcode"), {
  width: 100,
  height: 100
});

其中，第一个参数指定了二维码容器的DOM元素，第二个参数为生成的二维码的宽和高。

4. 生成二维码

最后一步是使用Qrcode实例的makeCode方法生成二维码，方法接收一个字符串作为参数，表示要生成二维码的数据。例如：

qrcode.makeCode("https://www.baidu.com");

代码执行后，页面上就会显示出一个链接到百度的二维码。

示例1：生成纯文本的二维码

<div id="qrcode"></div>
<button onclick="generateQRCode()">生成二维码</button>
<input type="text" id="text">

<script>
  var qrcode = new QRCode(document.getElementById("qrcode"), {
    width: 100,
    height: 100
  });

  function generateQRCode() {
    var text = document.getElementById("text").value;
    qrcode.makeCode(text);
  }
</script>

在这个示例中，我们提供了一个输入框和一个按钮，用户可以输入自己需要生成二维码的文本，点击按钮后，页面上就会生成对应的二维码。

示例2：生成带有logo的二维码

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

<script>
  var qrcode = new QRCode(document.getElementById("qrcode"), {
    width: 200,
    height: 200
  });

  var options = {
    logo: "https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js",
    logoWidth: 80,
    logoHeight: 80,
    logoBackgroundColor: '#ffffff',
  };

  qrcode.makeCode("https://www.taobao.com", options);
</script>

在这个示例中，我们生成了一个链接到淘宝的二维码，并在二维码中添加了一个logo。通过传入options参数来指定logo的位置、大小和背景颜色等。