将网页生成二维码

最新推荐文章于 2024-07-23 13:58:41 发布

Cold_Blooder

最新推荐文章于 2024-07-23 13:58:41 发布

阅读量2.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/cold_Blooder/article/details/80626318

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用jquery.qrcode.min.js生成二维码步骤：

1、引入相应的js,注意下面的两个js都需要引入

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

2、页面

<body>

	 	<div class="topicsCode">
	 		<div id="qrcode"></div>
	 		<p class="prompt">请扫描二维码在手机端预览</p>
	 	</div>
		 <script>
			$(function(){
				$('#qrcode').qrcode('https://www.baidu.com');
			})
		</script>
</body>

这样一个简单的生成二维码的demo就完成了，jquery.qrcode.min.js还提供了一些属性，用来修改生成二维码的属性。需要的话自行查阅文档。下面附上完整页面代码：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>预览</title>
	<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
	<script type="text/javascript" src="/resources/js/jquery.qrcode.min.js"></script>
	<style>
        .topicsCode{
            width: 255px;
            height: 255px;
            text-Align:center;
        }
        .topicsCode{
            position: absolute;
            top: 20%;
            left: 39.5%;
        }
        #qrcode{
            margin: 0;
            padding: 0;
        }
        .prompt{
        	margin-top:5px;
        	font-size:15px;
        }
	</style>
</head>
<body>

	 	<div class="topicsCode">
	 		<div id="qrcode"></div>
	 		<p class="prompt">请扫描二维码在手机端预览</p>
	 	</div>
		 <script>
			$(function(){
				$('#qrcode').qrcode('https://www.baidu.com');
			})
		</script>
</body>
</html>

你有多专注，就有多成功