生成二维码名片

最新推荐文章于 2023-03-25 01:32:42 发布

伪伪的喵喵

最新推荐文章于 2023-03-25 01:32:42 发布

阅读量794

点赞数

分类专栏：前端练习文章标签：二维码 qrcode 毛玻璃效果

本文链接：https://blog.csdn.net/qq_32392057/article/details/63687350

版权

前端练习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

二维码名片

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

知识点

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

收藏

觉得还不错? 一键收藏
1
评论
生成二维码名片

二维码名片填写信息生成二维码，扫码添加到手机通讯录知识点内容显示部分采用毛玻璃效果使用伪元素覆盖，并同时采用blur()滤镜使用qrcode.js生成二维码使用var qr = new QRCode(targId, info);实现效果图代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"
复制链接

扫一扫