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


      

    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="80%" /><br />
        <div 
    id="qrcode" style="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>

    其它设置

     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/",
             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.
  • 相关阅读:
    angular打包出现JavaScript堆内存不足
    antDesign 【NG-ZORRO、Angular】日期选择框时间段nz-range-picker设置默认选择日期及限制日期可选范围
    Echarts 折线图Demo调色12种,可以直接使用~~~
    公司版git完整版
    Linux实例重启服务器后root用户远程连接失败
    Flask+Redis+mq实现高并发
    Dockerfile
    Docker应用部署
    RabbitMQ 实现实现基本通信及订单处理
    centos 7 安装docker的文档参考
  • 原文地址:https://www.cnblogs.com/MakeView660/p/9640208.html
Copyright © 2020-2023  润新知