您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
使用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; } h2 { 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"> <h2 id="title">通信录</h2> <img id="add" src="./img/add.png" alt="" /> </div> <p id="tip"> 当前没有任何联系人<br /> 请点击右上角添加 </p> <div id="content"> <div id="template" class="card" > <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怎么编写一个通讯录功能的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。