1.首先去官网下载qrcode.js
2.下载最新的jQuery文件
3.导入qrcode.js文件和jQuery文件
html部分:
<div id="box">
<div class="left">
<ul>
<li>
<span>姓名</span>
<input type="text" id="name" />
</li>
<li>
<span>公司</span>
<input type="text" id="company" />
</li>
<li>
<span>职位</span>
<input type="text" id="title" />
</li>
<li>
<span>地址</span>
<input type="text" id="Address" />
</li>
<li>
<span>手机</span>
<input type="text" id="mobile" />
</li>
<li>
<span>邮箱</span>
<input type="text" id="email" />
</li>
<li>
<span>网址</span>
<input type="text" id="web" />
</li>
<li>
<span>备注</span>
<input type="text" id="desc" />
</li>
<li id="bth">开启通讯录</li>
</ul>
</div>
<div class="right" id="qrcode"></div>
css部分:
body {
margin: 0;
padding: 0;
background-image: url(img/5a0ea84244421.png);
}
#box {
width: 930px;
height: 300px;
margin: 80px auto;
position: absolute;
top: 20%;
left: 10%;
}
.left {
float: left;
width: 535px;
height: 320px;
}
.right {
margin-top: 25px;
float: right;
width: 180px;
height: 180px;
}
.left ul li {
color: white;
float: left;
list-style: none;
width: 200px;
height: 40px;
background: #333;
margin: 10px 20px;
text-align: center;
line-height: 40px;
}
.left ul li span {
float: left;
width: 50px;
height: 40px;
}
.left ul li input {
float: left;
width: 150px;
height: 38px;
border: 0;
background: rgb(0, 0, 0.1);
color: white;
outline: none;
text-indent: 10px;
}
#bth {
width: 440px;
background: #00CCCC;
cursor: pointer;
border-radius: 5px;
}
js部分:
var name, company, title, Address, mobile, email, web, desc;
$('#bth').click(function() {
name = "FN:" + $('#name').val() + "\n";
company = "ORG:" + $('#company').val() + "\n";
title = "TITLE:" + $('#title').val() + "\n";
Address = "ADR:" + $('#Address').val() + "\n";
mobile = "TEL:" + $('#mobile').val() + "\n";
email = "EMAIL:" + $('#email').val() + "\n"
web = "URL:" + $('#web').val() + "\n";
desc = "NOTE:" + $('#desc').val() + "\n";
var info = "BEGIN:VCARD\n" + name + company + title + Address + mobile + email + web + desc + "END:VCARD";
// console.log(info);
var qrcode = new QRCode("qrcode"); //创建一个二维码对象
//生成二维码
qrcode.makeCode(info);
//让手机识别为通讯录
});
最终效果:
二维码生成成功后,我们可以打开微信扫一下,就会发现刚才文本框输入的信息全部保存到了新建联系人中,直接可以添加