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);
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
一.闲扯 有一天班长说了,同学们希望我开发一个可以共享位置的通讯录,于是自己简单设计了下功能.包括用户角色.发表微博.共享位置等等.这次也是有点私心的,为了锻炼最近看的angularjs,于是果断选择Node.js + MongoDB + angular.js的方案.当然,开发Node.js的体会越来越深刻.记得,去年leader告诉我说尽量让node的每一个服务只支撑一个业务功能,这样才能更方便的维护.当时特别想把一个Node服务做的特别强大.现在看来leader的做法是对的,我更加倾向于把n
-
原生JS实现微信通讯录
最近工作当中再一次遇到要实现一个车辆列表,要求能够像微信通讯录一样,实现右侧滑动,点击功能,并且滑动过程中,能够有提示.原来用jquery实现过一次,为了精简代码,现在用原生的实现一次.想必工作中大家都能用上,所以就临时谢了一个小案例,分享给大家.本案例重在分享移动端的实现思路,代码和样式可能没有优化,大家见谅. 原本微信通讯录效果: 本案例效果图: 实际工作中可以实现类似于城市列表,产品字母排序这种需求: < p>代码展示 Dom Dom结构仅供参考,实际情况看自己需求,比如我现在工作当中使
-
基于aotu.js实现微信自动添加通讯录中的联系人功能
什么是Auto.JS? Auto.JS是Android平台上的JavaScript自动化工具. 它的本质是可执行自己编写的简易Javascript脚本的,尤其可以在开启"无障碍模式"的情况下对其他App进行一些操作的一个Android App,便于进行自动化操作.学习成本非常低. Auto.JS已被黑产广泛使用,以至于作者关闭了官方下载通道. 官网:https://github.com/hyb1996/Auto.js 下面通过代码给大家介绍下基于aotu.js实现微信自动添加通讯录中的
-
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
只做实现..完全没考虑性能优化.所以我实现了以后特别卡. 第一个是在通讯录右边的索引条上进行滑动,滑动到相应字母就跳转到相应字母的锚点上. 思路:监听touchmove事件,获取clientX和clientY,传入到elementFromPoint,然后获取到元素以后执行click()即可. 这里会有个问题,就是如果你的页面中有遮罩层这一类的顶层元素的话,请将其pointer-events:none,就算这个元素的display:none;也没用,实践出真知.可以去试下. index为索引div
-
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; }
-
vue实现通讯录功能
vue实现手机通讯录功能,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>动态加载组件</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maxi
-
JavaScript截屏功能的实现代码
最近参与了网易炉石盒子的相关页面开发,在做卡组分享页(地址:炉石盒子卡组分享),有个需求:用户可以把这个卡组以图片的形式分享给好友.最初的的做法是使用服务器把该页面转换成图片,然后把图片地址返回给前端.嗯,这样也挺好的啊,而且服务器还可以对转换出来的图片进行缓存,下次请求可以直接返回图片地址了.原理上是毫无毛病的.然而,问题来了,后台转换的图片和页面内容偶尔不一致,有时候会少了一一些内容,PM姐姐就很不爽了,说这个问题一定要解决.反正页面转成图片的接口是后台做的,关我luan事啊!就在暗暗自喜的
-
Javascript中暂停功能的实现代码
复制代码 代码如下: <script language="javascript"> /*Javascript中暂停功能的实现 Javascript本身没有暂停功能(sleep不能使用)同时 vbscript也不能使用doEvents,故编写此函数实现此功能. javascript作为弱对象语言,一个函数也可以作为一个对象使用. 比如: function Test(){ alert("hellow"); this.NextStep=function()
-
JavaScript评论点赞功能的实现方法
通过分析评论功能的逻辑关系,学会如何使用JavaScript实现评论.回复.点赞等各种功能 1.学会JavaScript处理日期和时间. 2.掌握Dom操作中的添加/删除子节点方法. 3.使用setTimeout设置定时器. 4.使用clearTimeout清除定时器以及事件代理的运用. 效果图: 1)实现删除分享内容功能 利用事件代理实现点击关闭按钮删除分享内容. 删除事件: 利用事件代理功能,在父元素节点上添加事件,以减少代码量和系统运行负荷. 事件代理的时候,使用事件对象中的srcElem
-
纯Javascript实现ping功能的方法
本文实例讲述了纯Javascript实现ping功能的方法.分享给大家供大家参考.具体实现方法如下: function ping(ip) { var img = new Image(); var start = new Date().getTime(); var flag = false; var isCloseWifi = true; var hasFinish = false; img.onload = function() { if ( !hasFinish ) { flag = true
-
javascript省市级联功能实现方法实例详解
本文实例讲述了javascript省市级联功能实现方法.分享给大家供大家参考,具体如下: 初步实现方法: <html> <head> <script language="javascript"> function changecity(){ var province = document.form1.selprovince.value; var newoption1,newoption2; switch(province){ case "四
-
javascript自定义事件功能与用法实例分析
本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述 自定义事件很难派上用场? 为什么自定义事件很难派上用场,因为以前js不是模块化开发,也很少协作.因为事件本质是一种通信方式,是一种消息,只有存在多个对象,多个模块的情况下,才有可能需要用到事件进行通信.而现在有了模块化之后,已经可以使用自定义事件进行各模块间协作了. 哪里用得到自定义事件? 事件本质是一种消息,事件模式本质上是观察者模式的实现,那么用得上观察者模式的地方,自然也可以也可以用上事件模式.
-
C语言实现通讯录功能
本文实例为大家分享了C语言实现通讯录功能的具体代码,供大家参考,具体内容如下 先定义头文件 #ifndef __CONTACT_H__ #define __CONTACT_H__ #define NAME_LEN 10 #define SEX_LEN 6 #define TELE_LEN 12 #define ADDR_LEN 20 #define MAX_PEO 1000 typedef struct PEO { char name[NAME_LEN]; int age; char sex[S
-
javascript实现对话框功能警告（alert 消息对话框）确认（confirm 消息对话框）
我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字.如果你不点击"确定",就不能对网页做任何操作,这个小窗口就是使用alert实现的. 注:alert弹出消息对话框(包含一个确定按钮). 语法: alert(字符串或变量); 注意: 1. 在点击对话框"确定"按钮前,不能进行任何其它操作. 2. 消息对话框通常可以用于调试程序. 3. alert输出内容,可以是字符串或变量,与document.write 相似. <title>a