二維碼名片
填寫信息生成二維碼，掃碼添加到手機通訊錄
知識點
- 內容顯示部分採用毛玻璃效果
- 使用僞元素覆蓋，並同時採用
blur()濾鏡
- 使用僞元素覆蓋，並同時採用
- 使用
qrcode.js生成二維碼
- 使用
var qr = new QRCode(targId, info);實現
- 使用
效果圖
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calling card</title>
<link rel="stylesheet" href="css/reset.css">
<style>
body, section::before {
background: #339955 url(img/background.jpg) 0 / cover fixed;
}
section {
position: absolute;
width: 700px;
height: 280px;
left: calc(50% - 350px);
top: calc(50% - 140px);
background: hsla(0, 0%, 100%, 0.3);
overflow: hidden;
}
section::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
filter: blur(20px);
z-index: -1;
margin: -30px;
}
section .message {
position: absolute;
width: 400px;
height: 250px;
top: calc(50% - 125px);
left: 2%;
/*border: 1px solid black;*/
}
section .message ul {
width: 400px;
height: 220px;
margin: 25px 0;
}
section .message ul li {
margin: 10px 5px;
float: left;
font-size: 15px;
/*color: #000;*/
font-weight: bold;
}
section .message ul li input {
height: 20px;
width: 150px;
text-indent: 5px;
border: 0;
border-radius: 3px;
}
section .message ul li .button {
position: absolute;
width: 300px;
height: 35px;
left: calc(50% - 150px);
top: calc(100% - 70px);
line-height: 35px;
text-align: center;
color: #fff;
border-radius: 5px;
background: rgba(50, 248, 50, 0.5);
cursor: pointer;
}
.qrcode {
width: 200px;
height: 200px;
float: right;
position: relative;
margin: 40px 30px -10px 0px;
background: #eee;
border: 1px solid black;
cursor: default;
}
.qrcode h2 {
position: absolute;
height: 15px;
width: 100px;
top: calc(50% - 40px);
left: calc(50% - 50px);
}
</style>
</head>
<body>
<section>
<div class="message" id="message">
<ul>
<li><span>姓名: </span><input type="text"></li>
<li><span>公司: </span><input type="text"></li>
<li><span>職位: </span><input type="text"></li>
<li><span>郵箱: </span><input type="email"></li>
<li><span>電話: </span><input type="tel"></li>
<li><span>備註: </span><input type="text"></li>
<li><div class="button" id="btn">點擊生成二維碼</div></li>
</ul>
</div>
<div class="qrcode" id="qrcode"><h2>點擊按鈕<br/>生成二維碼</h2></div>
</section>
<script type="text/javascript" src='js/qrcode.min.js'></script>
<script type="text/javascript" src='js/myJS.js'></script>
</body>
</html>var loadEvent = function(fn) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
};
var buildQrcode = function (info, target, targetName) {
target.innerHTML = '';
var qr = new QRCode(targetName, {
text: info,
width: 200,
height: 200,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
};
var setButtoonClick = function (btn, inputArr) {
var textArr = ['FN:', 'ORG:', 'WORK:', 'EMAIL:', 'TEL:', 'DESC:'],
info = null,
infoEnd = null,
i,
len;
btn.onclick = function () {
info = '';
info = 'BEGIN:VCARD\n';
infoEnd = 'END:VCARD';
if (textArr.length === inputArr.length) {
for (i = 0, len = textArr.length; i < len; i++) {
info += textArr[i] + inputArr[i].value + '\n';
}
info += infoEnd;
if (document.getElementById('qrcode')) {
var qrcode = document.getElementById('qrcode');
buildQrcode(info, qrcode, 'qrcode');
}
}
};
};
var perparCard = function () {
var message = null,
btn = null;
if (!document.getElementById || !document.getElementById('message') || !document.getElementById('btn')) {
return false;
}
message = document.getElementById('message');
inputArr = message.getElementsByTagName('input');
btn = document.getElementById('btn');
setButtoonClick(btn, inputArr);
};
loadEvent(perparCard);