二维码生成

最新推荐文章于 2024-01-11 14:07:28 发布

哇酷哇酷zzz

最新推荐文章于 2024-01-11 14:07:28 发布

阅读量125

点赞数 1

分类专栏： # 工具代码收集

工具代码收集专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用HTML、jQuery和qrcode.js库在网页上动态生成二维码，包括代码示例和参数详解。适合初学者了解前端二维码生成技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

0. 文件地址
1. 编写代码
2. 生成二维码的参数说明

0. 文件地址

链接：https://pan.baidu.com/s/1bDszhU8o5YLaUUHquJtsGg
提取码：102b

1. 编写代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>二维码生成</title>
  <script src="./jquery2.1.4.js"></script>
  <script src="./jquery.qrcode.js"></script>
  <script src="./utf.js"></script>



</head>
<body>
  <!-- 编写一个div元素，在其中完成二维码的绘制 -->
  <div id="qrcode">

  </div>
  
  <script>
    // 描述生成的二维码
    var config = {
      width: 200,
      height: 200,
      text: '这是二维码的内容'
    }

    // 选择div
    $('#qrcode').qrcode(config);
  </script>
</body>
</html>

2. 生成二维码的参数说明


var config  = {
    width:数字,//值是number类型, 表示的单位是px  必须传递
    height:数字,//值是number类型, 表示的单位是px  必须传递 
    text:"内容",//text就表示二维码中存储的数据  必须传递
    correctLevel:数字,//取值为0|1|2|3 表示二维码的纠错级别0:L/1:M/2:Q/3:H ,默认0  可选参数
    background:"#rrggbb",//默认白色, 表示二维码的后景颜色 可选参数
    foreground:"#rrggbb",//默认黑色, 表示二维码的前景颜色 可选参数
    render:"绘制模式"//取值:table/canvas , 默认table 可选参数
};