js android 通讯录,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
App
随机头像
通信录
当前没有任何联系人
请点击右上角添加
测试
Test
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 android 通讯录,JavaScript实现通讯录功能相关推荐
- js php通讯录,基于aotu.js实现微信自动添加通讯录中的联系人功能
什么是Auto.JS? Auto.JS是Android平台上的JavaScript自动化工具. 它的本质是可执行自己编写的简易Javascript脚本的,尤其可以在开启"无障碍模式" ...
- Android开发 读取手机通讯录
目录 一.通讯录界面布局 activity_contact.xml 界面布局: contact_item.xml 条目界面布局: item_bg.xml 条目界面的背景文件(drawable文件夹中创 ...
- php实现通讯录按字母分组,通讯录首字母检索功能实现
这次给大家带来通讯录首字母检索功能实现,通讯录首字母检索功能实现的注意事项有哪些,下面就是实战案例,一起来看一下. 主要代码如下: 通讯录首字母检索 通讯录 张三 李四 王五 刘六 马七 黄八 莫九 ...
- Android高仿QQ通讯录(附源码)
先看看效果图吧 通讯录的基本实现功能 1,从android手机中读取联系人,通话记录,短信息数据 2,打电话,发送短信,接受短信(安装此应用后要先把手机重启下才能接受到短信息,不然会被其他第三方应用屏 ...
- 无需越狱，Android通话记录、通讯录、短信同步到iphone6
Q:如何将通讯录从Android同步到IOS?? 新换的手机,是个人都喜欢先瞎折腾一番.那么问题来了,怎样将旧手机的信息搬到新手机?这是件让人很最头疼的事.纠结了一番,我还是狠下心来,并且本着爱好技术 ...
- android contacts电话查询头像,android怎么取得本地通讯录的头像的原图
android怎么取得本地通讯录的头像的原图 发布时间:2021-02-10 19:25:16 来源:亿速云 阅读:103 作者:小新 这篇文章将为大家详细讲解有关android怎么取得本地通讯录的头 ...
- android adb 联系人,使用adb命令向Android模拟器中导入通讯录联系人的方法
本文实例讲述了使用adb命令向Android模拟器中导入通讯录联系人的方法.分享给大家供大家参考.具体实现方法如下: 使用adb提供的命令, 可以非常方便地从PC中将通讯录导入android模拟器中. ...
- 非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 成品显示,可左右切换月份 ...
- android uri 电话号码,android 跳转通讯录 Android跳转到通讯录获取用户名称和手机号码的实现思路...
想了解Android跳转到通讯录获取用户名称和手机号码的实现思路的相关内容吗,小哥在江湖在本文为您仔细讲解android 跳转通讯录的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:andr ...
最新文章
- 用JavaScript获取URL中的参数值
- mysql union 优化_mysql 5.7.3 对union all 的优化
- 大话西游之Office应用实例系列! 13
- 最完整的Win7快捷键
- concat php,php基于concat实现无限分类
- (NO.00003)iOS游戏简单的机器人投射游戏成形记(一)
- C#LeetCode刷题之#39-组合总和（Combination Sum）
- Ruby Web实时消息后台服务器推送技术---GoEasy
- Java并发——Java与多线程
- aes 加密_AES加密的安全问题
- 玩转Excel系列-SUMIF函数实例教程
- WP7中,如何把7.1的项目改为7.0的
- java引用型变量_java-有没有办法用类型变量引用当前类型？
- c语言计算器括号怎么解决,C语言计算器,该如何解决
- python变量名长度有限制吗_url长度有限制么？
- Tomcat 6.0 安装与启动
- 启用计算机的fn键,联想电脑怎么设置fn键
- 如何防止单元格在Google表格中进行编辑
- mysql 加上天数_MySQL Datetime添加天数？
- 一份机器学习的自白书
热门文章
- Linux用户空间线程管理介绍之二：创建线程堆栈
- java设计九宫格拼图软件哪个好用_八款超好用的拼图工具
- LeetCode 871. Minimum Number of Refueling Stops 最少加油次数
- 解决Could not find method xxx for arguments问题
- 全球与中国葡萄酒保鲜工具市场现状及未来发展趋势
- 为葡萄酒数据集构造SVM分类器和使用随机森林回归模型预测葡萄酒质量
- php excel模板导出、openoffice excel转pdf、多文件压缩下载
- 网络营销人应具备的五大思维
- 腾讯徐春明：互联网金融行业HBase实践与创新
- 人工智能——搜索策论2