zoukankan      html  css  js  c++  java
  • jquery.qrcode.min.js生成二维码 通过前端实现二维码生成

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>演示:使用jquery.qrcode生成二维码</title>
    <style type="text/css">
    .demo{width:400px; margin:40px auto 0 auto; min-height:250px;}
    .demo p{line-height:30px}
    #code{margin-top:10px}
    </style>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.qrcode.min.js"></script>
    <script type="text/javascript">
    $(function(){
        var str = "我是用jquery.qrcode.min.js生成的二维码";
        $('#code').qrcode(toUtf8(str));
        
        $("#sub_btn").click(function(){
            $("#code").empty();
            var str = toUtf8($("#mytxt").val());
            
            $("#code").qrcode({
                render: "table",
                 200,
                height:200,
                text: str
            });
        });
    })
    function toUtf8(str) {   
        var out, i, len, c;   
        out = "";   
        len = str.length;   
        for(i = 0; i < len; i++) {   
            c = str.charCodeAt(i);   
            if ((c >= 0x0001) && (c <= 0x007F)) {   
                out += str.charAt(i);   
            } else if (c > 0x07FF) {   
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));   
                out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));   
                out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));   
            } else {   
                out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));   
                out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));   
            }   
        }   
        return out;   
    }  
    </script>
    </head>
    
    <body>
    <div id="main">
       <div class="demo">
               <p>使用jquery.qrcode生成二维码 请输入内容然后提交生成二维码:</p>
            <p><input type="text" class="input" id="mytxt" value=""> <input type="button" id="sub_btn" value="提交"></p>
               <div id="code"></div>
       </div>
    </div>
    
    </body>
    </html>
  • 相关阅读:
    iOS开发 日常错误积累
    Linux编程---I/O部分
    Binder机制1---Binder原理介绍
    hdu4405概率dp入门
    SSL连接建立过程分析(1)
    用GDB调试程序(一)
    RBAC权限管理
    HDU3930(离散对数与原根)
    Java实现 蓝桥杯VIP 算法提高 特殊的质数肋骨
    Java实现 蓝桥杯VIP 算法提高 产生数
  • 原文地址:https://www.cnblogs.com/liker3/p/5917062.html
Copyright © 2011-2022 走看看