當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript 实现一个通讯录

發布時間：2023/12/20 javascript 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 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 实现一个通讯录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。