JavaScript 实现一个通讯录

直接贴代码

index.css

BODY,
HTML {
    width: 100%;
    height: 100%;
    margin: 0px;
    font-family: "PingFang SC", "微软雅黑", sans-serif;
    font-weight: 300;
    color: #333;
}

.header {
    width: 100%;
    padding: 32px;
}

h1 {
    margin: 32px;
    float: left;
    font-weight: 300;
    font-size: 24px;
}

#add {
    margin: 32px;
    margin-top: 38px;
    float: right;
    width: 24px;
}

#tip {
    width: 100%;
    text-align: center;
    position: fixed;
    top: 240px;
    color: #9E9E9E;
}

#mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(33, 33, 33, 0.72);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}

#panel {
    width: 330px;
    height: 320px;
    background: #FFF;
    border-radius: 10px;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    text-align: center;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

#avatar {
    margin: 0px auto;
    margin-top: -48px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #FFF;
    background-size: cover !important;
    border: 2px solid #FFFFFF;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}

#random {
    color: #4A90E2;
    text-decoration: underline;
}

input {
    margin: 0px;
    width: 60%;
    background: #FFFFFF;
    border: 2px solid #EEEEEE;
    border-radius: 10px;
    font-size: 16px;
    padding: 12px 16px;
    outline: none;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
    margin-top: 8px;
}

input:first-child {
    margin-top: 24px;
}

input:focus {
    border: 2px solid #4A90E2;
}

#save {
    width: 26%;
    background: #4A90E2;
    border-radius: 10px;
    padding: 12px;
    color: #FFF;
    margin-top: 24px;
    float: left;
    margin-left: 48px;
}

#cancel {
    width: 26%;
    background: #EEEEEE;
    border-radius: 10px;
    padding: 12px;
    color: #333;
    margin-top: 24px;
    float: right;
    margin-right: 48px;
}
/* 禁用鼠标 */
.disableAddModal {
    background: rgba(33, 33, 33, 0) !important;
    pointer-events: none;
}
 /* 完全透明 */
.disableAddModal #panel {
    transform: scale(0.9);
    opacity: 0; 
   
}

#content {
    padding: 16px;
    padding-top: 97px;
}

.card {
    margin-top: 8px;
    width: 100%;
    height: 104px;
    background: #FFFFFF;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;

    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

.card_expand {
    height:145px !important;
}

.card_expand .expand {
    margin-top: 16px !important;
}

.avatar {
    margin-top: 24px;
    margin-left: 24px;
    float: left;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #9E9E9E;
    background-size: cover !important;
    border: 2px solid #FFFFFF;
    border: 3px solid #EEEEEE;
}

.group {
    margin-left: 16px;
    margin-top: 33px;
    float: left;
    line-height: 2px;
}

.info {
    font-size: 12px;
    color: #9E9E9E;
}

.more {
    padding: 24px;
    margin-top: 28px;
    width: 16px;
    float: right;
}

.expand {
    width: 100%;
    float: left;
    margin-top: 24px;
}


.edit {
    text-align:center;
    vertical-align:middle;
    display:flex;
    align-items: center ;
    justify-content: center;
    background: url("./img/edit.png");
    background-size: cover;
    float: left;
    width: 50%;
    height: 43px;

    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
}

.edit:hover {
    background: url("./img/edit-active.png");
    background-size: cover;
}

.delete {
    background: url("./img/delete.png");
    background-size: cover;
    float: right;
    width: 50%;
    height: 43px;
    display:flex;
    align-items: center ;
    justify-content: center;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
}

.delete:hover {
    background: url("./img/delete-active.png");
    background-size: cover;
}

.line {
    float: left;
    height: 24px;
    border-right: #EEE 1px solid;
    margin-left: -1px;
    margin-top: 8px;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="mask" class="disableAddModal">
        <div id="panel">
            <div id="avatar"></div>
            <p id="random">随机头像</p>
            <input type="text" id="name" placeholder="请输入中文姓名">
            <input type="text" id="info" placeholder="请输入英文姓名">
            <div id="save">保存</div>
            <div id="cancel">取消</div>
        </div>
    </div>
    <div id="header">
        <h1 id="title">通信录</h1>
        <img id="add" src="./img/add.png" alt="" />
    </div>
    <p id="tip">
        当前没有任何联系人<br />
        请点击右上角添加
    </p>
    <div id="content">
        <div id="template" class="card" style="display:none;">
            <div class="avatar"></div>
            <div class="group">
                <p class="name">测试</p>
                <p class="info">Test</p>
            </div>
            <img src="./img/more.png" alt="" class=" more">
            <div class="expand" >
                <div class="edit" >修改</div>
                <div class="line"></div>
                <div class="delete">删除</div>
            </div>
        </div>
    </div>

    <script src="./index.js"></script>
</body>
</html>

index.js

// 获取所需要的dom元素
var DOM = {
    mask: document.getElementById('mask'),
    add: document.getElementById('add'),
    avatar: document.getElementById('avatar'),
    names: document.getElementById('name'),
    infos: document.getElementById('info'),
    save: document.getElementById('save'),
    cancel: document.getElementById('cancel'),
    random: document.getElementById('random'),
    content: document.getElementById('content'),
    template: document.getElementById('template'),
    tip: document.getElementById('tip'),
};
// 随机生成名称和英文名
data = [
    { name: '佐藤', info: 'さとう' },
    { name: '铃木', info: 'すずき' },
    { name: '高桥', info: 'たかはし' },
    { name: '田中', info: 'たなか' },
    { name: '高桥', info: 'たかはし' },
    { name: '渡边', info: 'わたなべ' },
    { name: '伊藤', info: 'いとう' },
    { name: '小林', info: 'こばやし' },
    { name: '山本', info: 'やまもと' },
];
var nowNode;
// 弹出框
function disableAddModal(show) {

    switch (show) {
        case true:
            // mask 的class名称修改为 空 显示添加框
            DOM.mask.className = '';
            // 随机头像
            DOM.avatar.style.backgroundImage =
                "url('./avatar/" + Math.floor(Math.random() * 47) + ".jpg')";
            
            // 随机数赋予变量
            index = Math.floor(Math.random() * data.length);
            // 字典内随机取值
            DOM.names.value = data[index].name;
            DOM.infos.value = data[index].info;

            break;

        case false:
            // 隐藏添加框
            DOM.mask.className = 'disableAddModal';
            break;

        default:
            break;
    }
}

// 添加
DOM.add.addEventListener('click', function () {
    disableAddModal(true);
});
// 关闭
DOM.cancel.addEventListener('click', function () {
    nowNode = undefined;
    disableAddModal(false);
});

// 随机头像生成
DOM.random.addEventListener('click', function () {
    DOM.avatar.style.backgroundImage = "url('./avatar/" + Math.floor(Math.random() * 47) + ".jpg')";
});
// 扩展选项
function expand(params) {
    // var that = params.parentNode.className;
    // 未显示
    if (params.parentNode.className == 'card card_expand') {
        params.parentNode.className = 'card ';
    } else {
        //显示中
        params.parentNode.className = 'card card_expand';
    }
}

// 修改
function edit(params) {
    // 将本元素赋值
    nowNode = params;
    // 显示弹窗
    disableAddModal(true);


    // DOM.avatar.style.background = params.getElementsByClassName('avatar')[0].style.background;
    //将现用的头像、名称、英文名 赋值给弹窗
    DOM.avatar.style.backgroundImage = nowNode.getElementsByClassName(
        'avatar'
    )[0].style.backgroundImage;
    DOM.names.value = nowNode.getElementsByClassName('name')[0].innerText;
    DOM.infos.value = nowNode.getElementsByClassName('info')[0].innerText;
}
//删除
function remove(params) {

    params.remove();
}

//保存
DOM.save.addEventListener('click', function () {
    var node;
    DOM.tip.style.display = 'none';
    // 是否为undifind
    // !!noDode 为nowNode 不为空
    if (!!nowNode) {
        // console.log('nowNode不为空:' + nowNode);
        node = nowNode;
    } else {
        //复制DOM.template 元素
        node = DOM.template.cloneNode(true);
        // console.log('nowNode为空:'+node)
    }
    // node = DOM.template.cloneNode(true);

    node.style.display = 'block';
    node.getElementsByClassName('name')[0].innerText = DOM.names.value;
    node.getElementsByClassName('info')[0].innerText = DOM.infos.value;
    node.getElementsByClassName('avatar')[0].style.backgroundImage =
        DOM.avatar.style.backgroundImage;
    node.getElementsByClassName('more')[0].addEventListener('click', function () {
        // console.log(this);
        expand(this);
    });
    node.getElementsByClassName('edit')[0].addEventListener('click', function () {
        // console.log(this.parentNode.parentNode);
        edit(this.parentNode.parentNode);
        // console.log('nowNode' + nowNode);
    });
    node.getElementsByClassName('delete')[0].addEventListener('click', function () {
        // console.log(this.parentNode.parentNode);
        remove(this.parentNode.parentNode);
        // console.log('nowNode' + nowNode);
    });
    // 如果不存在会创建新的，如果存在会替换
    DOM.content.appendChild(node);
    nowNode = undefined;
    disableAddModal(false);
});