本文例項為大家分享了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,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.08),0 4px 8px 0 rgba(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.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,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.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="JavaScript實現通訊錄功能" />
 </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="JavaScript實現通訊錄功能" 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: 'やまもと' },];
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);
});

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。