<!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- 320px;
max-height: 600px;
max- 375px;
}
.qr-card-con {
padding: 0 10%;
}
.qr-card-con input[type='text'] {
height: 35px;
border: 1px solid #DDDDDD;
calc(100% - 20px);
border-radius: 3px;
padding: 0 10px;
margin-top: 50px;
background: #fff;
}
.qr-card-con input[type='button'] {
height: 35px;
border: none;
100%;
margin-top: 20px;
text-align: center;
color: #fff;
border-radius: 3px;
background: #eb414a;
}
.qr-card-img {
margin-top: 50px;
250px;
margin: calc((100% - 250px)/2);
text-align: center;
}
#qrCardImgCon {
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"), {
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>