easy.qrcode实现多彩多样式二维码效果代码-html代码-BFW代码库

easy.qrcode实现多彩多样式二维码效果代码

代码语言：html

所属分类：其他

代码描述：easy.qrcode实现多彩多样式二维码效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/easy.qrcode.js"></script>
	<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			
			#header{
				text-align: left;
				margin: 0;
				line-height: 80px;
				background-color: #007bff;
				color: #fff;
				padding-left: 20px;
				font-size: 36px;
			}
			
			#header a{color: #FFFF00;}
			#header a:hover{color: #FF9933;}
			#container {
				width: 1030px;
				margin: 10px auto;
			}

			.imgblock {
				margin: 10px 0;
				text-align: center;
				float: left;
				min-height: 420px;
				border-bottom: 1px solid #B4B7B4;
			}

			.qr table {
				margin: 0 auto;
			}

			.title {
				font-size: 15px;
				font-weight: bold;
				color: #fff;
				text-align: center;
				width: 330px;
				margin: 10px 5px;
				height: 60px;
				background-color: #0084C6;
				line-height: 60px;
			}
		
			#footer {
				margin-top: 20px;
				border-top: 1px solid gainsboro;
				line-height: 40px;
				clear: both;
				text-align: center;
			}

			#footer a {
				color: #0084C6;
				text-decoration: none;
			}
		</style>
</head>

<body>
	<div id="container"></div>	
	<script type="text/template" id="qrcodeTpl">
			<div class="imgblock">
				<div class="title">{title}</div>
				<div class="qr" id="qrcode_{i}"></div>
			</div>
		</script>
		<script type="text/javascript">
			var demoParams = [
				
				{
					title: "Normal",
					config: {
						text: "http://code.bfw.wiki/",

						width: 240,
						height: 240,
						quietZone: 0,
						colorDark: "#000000",
						colorLight: "#ffffff",

						//PI: '#f55066',

						correctLevel: QRCode.CorrectLevel.H // L, M, Q, H
					}
				},
				{
					title: "Color",
					config: {
						text: "http://code.bfw.wiki/",

						width: 240,
						height: 240,
						colorDark: "#473C8B",
						colorLight: "#FFFACD",

						//PI: '#f55066',

						correctLevel: QRC.........完整代码请登录后点击上方下载按钮下载查看