JavaScript實現(xiàn)通訊錄功能
更新時間：2020年12月27日 09:40:20 作者：書寫夢想的鉛筆頭
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)通訊錄功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)通訊錄功能的具體代碼，供大家參考，具體內(nèi)容如下
直接貼代碼
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"> 當前沒有任何聯(lián)系人<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')";
// 隨機數(shù)賦予變量
index = Math.floor(Math.random() * data.length);
// 字典內(nèi)隨機取值
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);
});
// 關(guān)閉
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;
//將現(xiàn)用的頭像、名稱、英文名 賦值給彈窗
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 {
//復(fù)制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);
});
// 如果不存在會創(chuàng)建新的，如果存在會替換
DOM.content.appendChild(node);
nowNode = undefined;
disableAddModal(false);
});
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了Openlayers實現(xiàn)地圖全屏顯示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
最近加入到新項目組負責前端技術(shù)預(yù)研和選型，其中涉及到一個熟悉又陌生的需求——國際化＆本地化。熟悉的是之前的項目也玩過，陌生的是之前的實現(xiàn)僅僅停留在"有"的階段而已。趁著這個機會好好學習整理一下，為后面的技術(shù)選型做準備2016-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單計算器小程序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
使用JS監(jiān)聽鍵盤按下事件（keydown event）
這篇文章主要介紹了使用JS監(jiān)聽鍵盤按下事件（keydown event），本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
通過js動態(tài)創(chuàng)建標簽,并設(shè)置屬性方法
下面小編就為大家分享一篇通過js動態(tài)創(chuàng)建標簽，并設(shè)置屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
avascript中的自執(zhí)行匿名函數(shù)應(yīng)用示例
javascript中的自執(zhí)行匿名函數(shù)可以用它創(chuàng)建命名空間，只要把自己所有的代碼都寫在這個特殊的函數(shù)包裝內(nèi)，那么外部就不能訪問，除非你允許2014-09-09
JavaScript實現(xiàn)拖拽網(wǎng)頁內(nèi)元素的方法
這篇文章主要介紹了JavaScript實現(xiàn)拖拽網(wǎng)頁內(nèi)元素的方法,以注釋形式較為詳細的分析了javascript事件監(jiān)聽、元素定位的相關(guān)技巧,并配有詳細的注釋以便于理解,需要的朋友可以參考下2015-04-04
這篇文章主要為大家簡單介紹了二維碼圖片生成器QRCode.js，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
Bootstrap警告（Alerts）的實現(xiàn)方法
這篇文章主要為大家詳細介紹了Bootstrap警告（Alerts）的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了微信小程序收貨地址API兼容低版本解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05