zoukankan      html  css  js  c++  java
  • 一键生成二维码

    工作中查资料偶然发现一个网站 自我感觉比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方式 
    //						     200, //宽度 
    //						    height:200, //高度 
    //						    text: "www.pintuer.com" //任意内容 
    //						});
    		}
    			else
    			{
    			
    		
    			}
    	}
    			
    		</script>
    </html>
    

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

    效果如图:

  • 相关阅读:
    Oracle学习笔记(一)——B-Tree索引
    B+树索引
    B树和B+树原理及在索引中的应用
    B树索引
    MySQL用B+树(而不是B树)做索引的原因
    细说mysql索引
    How to write XML-RPC clients
    How to write XML-RPC clients
    渲染流程(下):HTML、CSS和JavaScript是如何变成页面的
    渲染流程(上):HTML、CSS和JavaScript是如何变成页面的
  • 原文地址:https://www.cnblogs.com/bhmmlxieliming/p/6805176.html
Copyright © 2011-2022 走看看