二维码生成：使用 JavaScript 库QRCode.js生成二维码

时间：2022-02-11 08:50:44

　　

QRCode.js：跨浏览器的javascript二维码生成库，支持html5的Canvas画布，没有任何依赖。

Github 地址：https://github.com/davidshimjs/qrcodejs

QRCode+jQUery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml"  xml:lang= "ko"  lang= "ko" >
<head>
    < title >Javascript 二维码生成库：QRCode</ title >
    <meta http-equiv= "Content-Type"  content= "text/html; charset=UTF-8"  />
    <meta name= "viewport"  content= "width=device-width,initial-scale=1,user-scalable=no"  />
    <script  type = "text/javascript"  src= "http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" ></script>
    <script  type = "text/javascript"  src= "http://static.runoob.com/assets/qrcode/qrcode.min.js" ></script>
</head>
<body>
    < input   id = "text"   type = "text"  value= "https://www.cnblogs.com/MakeView660/"  style= "width:80%"  /><br />
    <div  id = "qrcode"  style= "width:100px; height:100px; margin-top:15px;" ></div>

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

        function makeCode () {      
            var elText = document.getElementById( "text" );
            
             if  (!elText.value) {
                alert( "Input a text" );
                elText.focus();
                 return ;
            }
            
            qrcode.makeCode(elText.value);
        }
        
        makeCode();
    
        $( "#text" ).
            on( "blur" , function () {
                makeCode();
            }).
            on( "keydown" , function (e) {
                 if  (e.keyCode ==  13 ) {
                    makeCode();
                }
            });
    </script>
</body>
</html>

二维码生成：使用 JavaScript 库QRCode.js生成二维码

其它设置：

 HTML Code 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div   id = "qrcode" ></div>
<script   type = "text/javascript" >
    var qrcode = new QRCode(document.getElementById( "qrcode" ), {
        text:  "https://www.cnblogs.com/MakeView660/" ,
        width: 128,
        height: 128,
        colorDark :  "#000000" ,
        colorLight :  "#ffffff" ,
        correctLevel : QRCode.CorrectLevel.H
    });
 </script>

qrcode.clear();                              //  clear the code.
qrcode.makeCode( "http://www.baidu.com" );     //  make another code.
标签：

相关文章