有趣的代码---- jQuery实现二维码生成

古城微笑少年丶 2022-11-07 14:52 80阅读 0赞

# 有趣的代码---- jQuery实现二维码生成 #

**步骤:**  
1. 引入Jquery.js文件  
2. 引入jquery.qrcode.js文件  
3. 引入支持中文的编码js文件 (utf.js) \*//在引入这三个js文件时候，顺序不能出错！！！\*  
4. 在网页中编写一个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);

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        <script src="js/jquery2.1.4.js"></script>
        
        <script src="js/jquery.qrcode.js"></script>
        
        <script src="js/utf.js"></script>
    </head>
    <body>
    <div id="qrcode"></div>
    <script>
        var config ={
        
            //配置二维码的长宽
            width :300,
            height :300,
            //此位置可以更改配置内容
            text :'成功了点赞噢！一起进步哈'
    
        };
        $("#qrcode").qrcode(config);
    </script>
    </body>
    </html>

下面是作者成功生成的二维码
    			  |   |  |	|
    			  |         |
    			  |			|
    		   ___|         |___
    		   \			   /
    		   	\             /
    		   	 \           / 
    		   	  \		    /
    		   	   \       /
    		   	    \     /
    		   	     \   /
    		   	      \ /
    		   	       +

![这是作者生成的二维码][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Npc29uMTk5OQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Npc29uMTk5OQ_size_16_color_FFFFFF_t_70]: /images/20221023/0f039d9d05654c3abcc4c04de76ca23f.png