使用jquery.qrcode生成二维码

最新推荐文章于 2020-06-04 15:48:00 发布

开着拖拉机的梦想家

最新推荐文章于 2020-06-04 15:48:00 发布

阅读量383

点赞数

分类专栏： jquery

jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

二维码应用已经渗透到我们的生活工作当中，您只需要用手机对着二维码“扫一扫”即可获得所对应的信息，方便我们了解商家、购物、观影等等。本文将介绍一款基于jquery的二维码生成插件qrcode，在页面中调用该插件就能生成对应的二维码。

demo演示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <title>演示：使用jquery.qrcode生成二维码</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<script type="text/javascript">
$(function(){
	
	$("#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>请输入内容然后提交生成二维码：</p>
        <p><input type="text" class="input" id="mytxt" value=""> <input type="button" id="sub_btn" value="提交"></p>
   		<div id="code"></div>
   </div>

插件的引用：

https://github.com/jeromeetienne/jquery-qrcode

转载地址：http://www.helloweba.com/view-blog-226.html