1. 程式人生 > >將網頁生成二維碼

將網頁生成二維碼

使用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>
你有多專注,就有多成功