JavaScript实现通讯录功能


Posted in Javascript onDecember 27, 2020

本文实例为大家分享了JavaScript实现通讯录功能的具体代码,供大家参考,具体内容如下

JavaScript实现通讯录功能
JavaScript实现通讯录功能
JavaScript实现通讯录功能
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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
js图片上传的封装代码
Aug 01 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 #Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 #Vue.js
在vue项目中封装echarts的步骤
Dec 25 #Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 #Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 #Vue.js
js实现头像上传并且可预览提交
Dec 25 #Javascript
如何在JavaScript中正确处理变量
Dec 25 #Javascript
You might like
php将数据库导出成excel的方法
2010/05/07 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
简单解析Django框架中的表单验证
2015/07/17 Python
Python简单读取json文件功能示例
2017/11/30 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
python批量赋值操作实例
2018/10/22 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
培训楼经理岗位责任制
2014/02/10 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
正规欠条模板
2015/07/03 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书