如何用几个js插件,在html 页面生成自己的二维码

最新推荐文章于 2025-04-18 13:04:53 发布

且听深林细雨

最新推荐文章于 2025-04-18 13:04:53 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Java 学习记文章标签： jquery html

本文链接：https://blog.csdn.net/qq_43098690/article/details/122373227

Java 学习记专栏收录该内容

66 篇文章

订阅专栏

本文介绍了如何在HTML页面中生成自己的二维码，主要利用jQuery的qrcode插件，涉及的资源包括jquery2.1.4.js、jquery.qrcode.js和可选的utf.js汉化包。文章提供源码展示，帮助读者快速理解和实践。

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

学习目标：

学会生成属于自己的二维码

准备工作：

插件工具

实现生成二维码，需要几个插件
jquery2.1.4.js、jquery.qrcode.js
和汉化包插件 utf.js

下载 jquery2.1.4.js、jquery.qrcode.js 这两个包
需要汉化的话再加上一个 utf.js

地址在这里
链接：https://pan.baidu.com/s/16k2Z0XEoAYMtLylxaZ7ruQ
提取码：is42

语言

html 、jQuery

截图展示：

请添加图片描述 <hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">

源码：

下面是个人写的源码，内容比较简单，看源码应该就没问题了

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二维码生成</title>
    <script src="js/jquery2.1.4.js"></script>
    <script src="js/jquery.qrcode.js"></script>
    <!--   有上面两个 js文件，就足够生成二维码， 下面这是汉化包js  -->
    <script src="js/utf.js"></script>
</head>
<body>
    <div id="qrcode"></div>
<script>
    <!--  二维码信息的设置  -->
    var config ={
        width:200,
        height:200,
        text:'这是一个二维码', //text就表示二维码中存储的数据  必须传递
        correctLevel: 1,  // 取值为0|1|2|3 表示二维码的纠错级别0:L/1:M/2:Q/3:H ,默认0  可选参数
        background:"#FFFFFF",//默认白色, 表示二维码的后景颜色 可选参数
        foreground:"#000000",//默认黑色, 表示二维码的前景颜色 可选参数
    };
    // jq 找到id 为qrcode的 div，执行 二维码生成
    $("#qrcode").qrcode(config);

</script>
</body>
</html>

补充步骤

步骤:
    1.  引入Jquery.js文件
    2.  引入jquery.qrcode.js文件
    3.  引入支持中文的编码js文件 (utf.js)
    4.  在网页中编写一个div 用于显示二维码
            <div id="div1"></div>
    5.  准备二维码的规格对象(JSON)
        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 可选参数
        };
    6.  通过选择器, 查找到上述的div ,得到Jquery对象, 通过jquery对象的qrcode函数生成二维码
            $("#div1").qrcode(config);