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 相关文章推荐
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
微信小程序实现跑马灯效果
Oct 21 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 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自动获取目录下的模板的代码
2010/08/08 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
js中this对象用法分析
2018/01/05 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
python实现拓扑排序的基本教程
2018/03/11 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
python实现对输入的密文加密
2019/03/20 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
python路径的写法及目录的获取方式
2019/12/26 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
初中科学教学反思
2014/01/21 职场文书
幼教简历自我评价
2014/01/28 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
校园环保建议书
2014/05/14 职场文书
就业意向书
2014/07/29 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
环卫处个人工作总结
2015/03/04 职场文书
三八妇女节致辞
2015/07/31 职场文书
同事欢送会致辞
2015/07/31 职场文书
宣传委员竞选稿
2015/11/19 职场文书