将网页生成二维码

使用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>

你有多专注，就有多成功

将网页生成二维码

猜你喜欢