一键生成二维码

最新推荐文章于 2021-08-02 17:37:52 发布

weixin_30702413

最新推荐文章于 2021-08-02 17:37:52 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/bhmmlxieliming/p/6805176.html

工作中查资料偶然发现一个网站自我感觉比bootstrap好用贴上网址：http://www.pintuer.com/

下载解压之后，可以看到这几个文件：

起步中有一个respond.js文件根据实际情况确定是否下载

插件中有一个生成二维码的插件，下载下来

解压后得到一个文件

新建HTML文件将这些文件引入

引用顺序 jQuery.js在pintuer.js之前引用，如有自定义的CSS或JS，请在pintuer.css及pintuer.js之后引用，同时为了IE8下正常使用响应式，自定义的CSS文件应在respond.js之前引用。

然后下面是代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		
		<meta name="renderer" content="webkit">
		<link rel="stylesheet" href="pintuer/pintuer.css" />
		<script type="text/javascript"  src="pintuer/jquery.js"></script>
		<script type="text/javascript" src="pintuer/pintuer.js"></script>
		<script type="text/javascript" src="pintuer/respond.js"></script>
		<script  type="text/javascript" src="pintuer/jquery.qrcode.min.js"></script>

		<title>生成二维码</title>
	</head>
	<body>
		
		<input type="button" value="生成二维码"  onclick="dian()"/>
		<div id="code"></div>
		
	</body>
	<script type="text/javascript">
	function dian()
	{
		var a = $("#code").html();
		if(a=="")
		{
			//qrcode支持canvas和table两种方式进行图片渲染，默认使用canvas方式，效率最高，当然要浏览器支持html5。
	                    //1、任意字符串方式 
	                    $('#code').qrcode("http://www.pintuer.com"); 
	                    //2、Json方式
//	                    $("#code").qrcode({ 
//						    render: "canvas", //table方式 
//						    width: 200, //宽度 
//						    height:200, //高度 
//						    text: "www.pintuer.com" //任意内容 
//						});
		}
			else
			{
			
		
			}
	}
			
		</script>
</html>

在代码中加一个点击事件来调用，加了一个判断来控制，不然会一直生成同一个二维码

效果如图：