这篇文章主要讲解了“JS实现一个基本的手机通讯录功能，方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JS实现一个基本的手机通讯录功能，方法是什么”吧！

具体内容如下

直接贴代码

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);
});

现在大家对于JS实现一个基本的手机通讯录功能，方法是什么的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue中有什么方法可以实现直接预览pdf

  本文主要讲解了如何在vue中使用pdfjs预览pdf文件，这样的优势是无须让用户安装专门的软件即可实现预览，下面就看看如何实现这个需求

• windows下安装Node出现报错2503怎么解决？

  windows下安装Node出现报错2503怎么解决？有一些朋友就有遇到node安装失败2503报错的问题，那么究竟我们该怎么办呢？下文给大家分享了一个解决方法，操作如下，大家可以了解看看，希望能帮助到大家。

• 如何用原生JS给导航条添加特效效果

  这篇文章主要为大家详细介绍了JS实现网页导航条特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• npm镜像代理服务更改问题怎么解决

  通过改变默认npm镜像代理服务，以下三种办法任意一种都能解决问题，建议使用第三种，将配置写死，下次用的时候不用重新配置。通过config命令npmconfigsetregistry https://registry.npm.taobao.orgnpminfounderscore(如果上面配置正确这个命令会有字符串response)命令行指定npm--registry

• 跨域解决的常用方法有什么，具体操作是什么

  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据,下面这篇文章主要给大家介绍了关于VUE跨域详解以及常用解决跨域的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下