js生成二维码 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>生成二维码</title>
		<link rel="stylesheet" href="css/reset.css" />
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
	</head>
	<style type="text/css">
		.qr-card {
			min-height: 500px;
			min-width: 320px;
			max-height: 600px;
			max-width: 375px;
		}
		
		.qr-card-con {
			padding: 0 10%;
		}
		
		.qr-card-con input[type='text'] {
			height: 35px;
			border: 1px solid #DDDDDD;
			width: calc(100% - 20px);
			border-radius: 3px;
			padding: 0 10px;
			margin-top: 50px;
			background: #fff;
		}
		
		.qr-card-con input[type='button'] {
			height: 35px;
			border: none;
			width: 100%;
			margin-top: 20px;
			text-align: center;
			color: #fff;
			border-radius: 3px;
			background: #eb414a;
		}
		
		.qr-card-img {
			margin-top: 50px;
			width: 250px;
			margin: calc((100% - 250px)/2);
			text-align: center;
		}
		
		#qrCardImgCon {
			width: 100%;
			height: 250px;
			margin-bottom: 10px;
		}
		
		#gohack {
			margin-top: 60px;
			text-align: center;
			color: #999;
		}
		
		.qr-card-img {
			display: none;
		}
	</style>

	<body>
		<div class="qr-card">
			 
			<div class="qr-card-con">
				<input id="qrText" type="text" placeholder="请输入数字券码" />
				<input id="qrBtn" type="button" value="生成二维码" />
			</div>
			<div class="qr-card-img">
				<div id="qrCardImgCon"></div>
				<p id="qrCardImgText"></p>
				<div id="gohack">返回</div>
			</div>

		</div>
		<script>
			var cardCon = document.getElementsByClassName("qr-card-con")[0];
			var cardImg = document.getElementsByClassName("qr-card-img")[0];
			var qrBtn = document.getElementById("qrBtn");
			var gohack = document.getElementById("gohack");
			var elText = document.getElementById("qrText");
			var qrCardImgText = document.getElementById("qrCardImgText");

			var qrcode = new QRCode(document.getElementById("qrCardImgCon"), {
				width: 250,
				height: 250
			});

			function makeCode() { 
				if(elText.value != '') {
					qrCardImgText.innerHTML = elText.value;
					qrcode.makeCode(elText.value);
					cardCon.style.display = 'none';
					cardImg.style.display = 'block';
				} else {
					alert('输入框不能为空');
					return false
				}
			}

			qrBtn.onclick = function() {
				makeCode();
			}
			gohack.onclick = function() {
				cardCon.style.display = 'block';
				cardImg.style.display = 'none';
				elText.value = '';
			}
		</script>
	</body>

</html>

　　

posted @ 2018-06-28 11:19  小囧光  阅读(150)  评论(0)  编辑  收藏  举报