生成二维码名片

来源：互联网发布：sql查询语句视频教程编辑：程序博客网时间：2024/05/02 19:04

二维码名片

填写信息生成二维码，扫码添加到手机通讯录

知识点

内容显示部分采用毛玻璃效果
- 使用伪元素覆盖，并同时采用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);

0 0