javascript
js android 通讯录,JavaScript实现通讯录功能
本文實例為大家分享了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
App隨機頭像
保存取消通信錄
當前沒有任何聯系人
請點擊右上角添加
測試
Test
修改刪除
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);
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
總結
以上是生活随笔為你收集整理的js android 通讯录,JavaScript实现通讯录功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 时间换算 将毫秒换算成时间
- 下一篇： JavaScript 实现一个通讯录