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",
            width: 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>

 

posted @ 2016-09-28 16:57  盛楠  阅读(413)  评论(0编辑  收藏  举报