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 相关文章推荐
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
javascript读写json示例
Apr 11 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
vue实现评价星星功能
Jun 30 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 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
多文件上载系统完整版
2006/10/09 PHP
PHP4引用文件语句的对比
2006/10/09 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
python实现五子棋小游戏
2020/03/25 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
对python中list的五种查找方法说明
2020/07/13 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
python 装饰器重要在哪
2021/02/14 Python
《威尼斯的小艇》教学反思
2014/02/17 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
公司管理建议书范文
2014/03/12 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书