jquery生成二维码-千锋教育

jquery生成二维码

发布时间:2023-06-16 16:41:00

发布人:zyh

　　要在jQuery中生成二维码，你可以使用现有的JavaScript库来实现。其中，`jquery-qrcode` 是一个常用的库，它提供了在jQuery环境下生成二维码的功能。

　　首先，确保你已经引入了jQuery和`jquery-qrcode`库的相关文件。可以通过以下方式引入它们：　　

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/jquery-qrcode/1.0.0/jquery.qrcode.min.js"></script>

　　然后，你可以使用以下代码在指定的DOM元素中生成二维码：　　

$(document).ready(function() {
  // 在指定的DOM元素中生成二维码
  $('#qrcode').qrcode({
    text: 'https://www.example.com',  // 要生成二维码的文本内容
    width: 200,                       // 二维码的宽度
    height: 200                       // 二维码的高度
  });
});

　　在上述代码中，我们使用`qrcode`函数来将指定的DOM元素(使用`id="qrcode"`)转换为二维码。可以通过`text`选项来指定要生成二维码的文本内容，并可以通过`width`和`height`选项来设置二维码的尺寸。

　　确保在页面加载完成后执行上述代码，这可以通过将其放置在`$(document).ready()`函数中来实现。

　　以下是一个完整的示例，演示如何在jQuery中生成二维码：　　

<!DOCTYPE html>
<html>
<head>
  <title>jQuery生成二维码示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.rawgit.com/jeromeetienne/jquery-qrcode/1.0.0/jquery.qrcode.min.js"></script>
</head>
<body>
  <div id="qrcode"></div>

  <script>
    $(document).ready(function() {
      $('#qrcode').qrcode({
        text: 'https://www.example.com',
        width: 200,
        height: 200
      });
    });
  </script>
</body>
</html>