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>
  • 相关阅读:
    文件操作3
    文件操作2
    kubernetes快速应用入门
    kubeadm初始化kubernetes集群
    kubernetes基础概念
    变量
    字面值
    关键字
    标识符
    Ubuntu安装MySql5.7
  • 原文地址:https://www.cnblogs.com/liker3/p/5917062.html
Copyright © 2011-2022 走看看