码迷,mamicode.com
首页 > 其他好文 > 详细

一键生成二维码

时间:2017-05-04 09:42:14      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:doctype   资料   png   htm   图片   mic   技术   文件   doc   

工作中查资料偶然发现一个网站 自我感觉比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>

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

 

效果如图:

技术分享

 

一键生成二维码

标签:doctype   资料   png   htm   图片   mic   技术   文件   doc   

原文地址:http://www.cnblogs.com/bhmmlxieliming/p/6805176.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!