文章詳情頁

JavaScript實(shí)現(xiàn)通訊錄功能

瀏覽：8日期：2023-06-12 09:03:29

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)通訊錄功能的具體代碼，供大家參考，具體內(nèi)容如下

直接貼代碼

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;}/* 禁用鼠標(biāo) */.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='http://www.aoyou183.cn/bcjs/index.css'></head><body> <div class='disableAddModal'> <div id='panel'> <div id='avatar'></div> <p id='random'>隨機(jī)頭像</p> <input type='text' placeholder='請(qǐng)輸入中文姓名'> <input type='text' placeholder='請(qǐng)輸入英文姓名'> <div id='save'>保存</div> <div id='cancel'>取消</div> </div> </div> <div id='header'> <h1 id='title'>通信錄</h1> <img src='http://www.aoyou183.cn/bcjs/img/add.png' alt='' /> </div> <p id='tip'> 當(dāng)前沒有任何聯(lián)系人<br /> 請(qǐng)點(diǎn)擊右上角添加 </p> <div id='content'> <div style='display:none;'> <div class='avatar'></div> <div class='group'> <p class='name'>測(cè)試</p> <p class='info'>Test</p> </div> <img src='http://www.aoyou183.cn/bcjs/img/more.png' alt='' class=' more'> <div > <div >修改</div> <div class='line'></div> <div class='delete'>刪除</div> </div> </div> </div> <script src='http://www.aoyou183.cn/bcjs/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’),};// 隨機(jī)生成名稱和英文名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 = ’’; // 隨機(jī)頭像 DOM.avatar.style.backgroundImage = 'url(’./avatar/' + Math.floor(Math.random() * 47) + '.jpg’)'; // 隨機(jī)數(shù)賦予變量 index = Math.floor(Math.random() * data.length); // 字典內(nèi)隨機(jī)取值 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);});// 關(guān)閉DOM.cancel.addEventListener(’click’, function () { nowNode = undefined; disableAddModal(false);});// 隨機(jī)頭像生成DOM.random.addEventListener(’click’, function () { DOM.avatar.style.backgroundImage = 'url(’./avatar/' + Math.floor(Math.random() * 47) + '.jpg’)';});// 擴(kuò)展選項(xiàng)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; //將現(xiàn)用的頭像、名稱、英文名賦值給彈窗 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 { //復(fù)制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); }); // 如果不存在會(huì)創(chuàng)建新的，如果存在會(huì)替換 DOM.content.appendChild(node); nowNode = undefined; disableAddModal(false);});

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。

JavaScript

上一條：JavaScript實(shí)現(xiàn)瀑布流布局的3種方式下一條：Javascript 模擬mvc實(shí)現(xiàn)點(diǎn)餐程序案例詳解

相關(guān)文章：

1. HTML <!DOCTYPE> 標(biāo)簽2. 輕松學(xué)習(xí)XML教程3. WMLScript的語法基礎(chǔ)4. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作?！钡脑幃悊栴}……5. css進(jìn)階學(xué)習(xí) 選擇符6. asp批量添加修改刪除操作示例代碼7. asp知識(shí)整理筆記4（問答模式）8. 詳解CSS偽元素的妙用單標(biāo)簽之美9. XML入門精解之結(jié)構(gòu)與語法10. html清除浮動(dòng)的6種方法示例

排行榜

					
					IntelliJ IDEA 統(tǒng)一設(shè)置編碼為utf-8編碼的實(shí)現(xiàn)
php相對(duì)路徑轉(zhuǎn)化成絕對(duì)路徑
Docker容器如何更新打包并上傳到阿里云
IDEA設(shè)置編碼背景色的方法
python 實(shí)現(xiàn)"神經(jīng)衰弱"翻牌游戲
spring+mybatis實(shí)現(xiàn)圖書管理系統(tǒng)
phpstudy apache開啟ssi使用詳解
詳解CSS偽元素的妙用單標(biāo)簽之美
ASP.NET Core按用戶等級(jí)授權(quán)的方法
asp知識(shí)整理筆記4（問答模式）
詳談ajax返回?cái)?shù)據(jù)成功 卻進(jìn)入error的方法
				