• jQuery二维码


    现在二维码很火,因为他可以很方便的贴到任何地方,只要扫一扫就可以看到二维码的内容

    ok

    废话少说,上代码

    这个二维码基于jquery和jquery.qrcode插件

    所以使用前先引入

    <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
    <script type="text/javascript" src="js/jquery.qrcode.js" ></script>
    

      

    给一个github的地址,可以通过github下载demo:

    https://github.com/Lucasli2018/jquery-qrcode.git
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
    		<script type="text/javascript" src="js/jquery.qrcode.js" ></script>
            <script type="text/javascript" src="js/qrcode.js" ></script> 
            <script type="text/javascript" src="js/utf.js" ></script>
    		 <p>Render in table</p>
    		 <div id="qrcodeTable"></div>
    		 <p>Render in canvas</p>
    		 <div id="qrcodeCanvas"></div>
    		 <script> 
    		    jQuery('#qrcodeTable').qrcode({
    		         render    : "table",                <!--二维码生成方式 -->
    		         text    : "http://www.baidu.com" , <!-- 二维码内容  -->
    		         width : "200",               //二维码的宽度
                     height : "200",
    		     });    
    		     jQuery('#qrcodeCanvas').qrcode({
    		     	 render    : "canvas",
    		         text    : "http://www.baidu.com",
    		         width : "200",               //二维码的宽度
                     height : "200",              //二维码的高度
                     background : "#ffffff",       //二维码的后景色
                     foreground : "#000000",        //二维码的前景色
                     src: 'img/gray.jpg'             //二维码中间的图片
    		     });    
    		 </script>
    		 </body>
    </html>
    

      

    效果:

  • 相关阅读:
    Linux查看占用内存前10的命令
    使用RestTemplate调用SpringCloud注册中心内的服务
    Eureka集群配置
    MySQL常用命令集合(偏向运维管理)
    pytest: error: unrecognized arguments报错解决
    MongoDB的安装
    MongoDB多条件分组聚合查询
    在排序数组中查找元素的第一个和最后一个位置
    搜索二维矩阵
    搜索旋转排序数组
  • 原文地址:https://www.cnblogs.com/1906859953Lucas/p/9815476.html
Copyright © 2020-2023  润新知