正文

手机联系人界面用JS实现，轻松掌握添加、删除与搜索技巧

/0 浏览量
0725

在移动应用开发中，联系人管理是一个基础且重要的功能。使用JavaScript（JS）实现一个简单的手机联系人界面，可以帮助你更好地理解前端开发的基础，同时掌握添加、删除与搜索联系人的一些实用技巧。下面，我将详细介绍如何使用JS构建这样一个界面。

1. 创建联系人界面

首先，我们需要一个基本的HTML结构来展示联系人列表。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联系人管理</title>
    <style>
        /* 简单的CSS样式 */
        .contact-list {
            list-style: none;
            padding: 0;
        }
        .contact-item {
            margin: 10px 0;
            padding: 5px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <h1>我的联系人</h1>
    <input type="text" id="searchInput" placeholder="搜索联系人...">
    <ul id="contactList" class="contact-list">
        <!-- 联系人列表将在这里动态生成 -->
    </ul>
    <script src="app.js"></script>
</body>
</html>

2. 使用JavaScript添加联系人

接下来，我们将使用JavaScript为联系人界面添加功能。以下是app.js文件的内容：

// 添加联系人
function addContact(name, phone) {
    const contactList = document.getElementById('contactList');
    const newContact = document.createElement('li');
    newContact.className = 'contact-item';
    newContact.innerHTML = `${name} - ${phone}`;
    contactList.appendChild(newContact);
}

// 初始化联系人数据
const contacts = [
    { name: '张三', phone: '1234567890' },
    { name: '李四', phone: '0987654321' }
];

// 在页面加载时添加初始联系人
window.onload = function() {
    contacts.forEach(contact => {
        addContact(contact.name, contact.phone);
    });
};

// 搜索联系人
function searchContact(query) {
    const contactList = document.getElementById('contactList');
    const searchInput = document.getElementById('searchInput');
    const lowerCaseQuery = query.toLowerCase();

    // 清空当前联系人列表
    contactList.innerHTML = '';

    // 添加匹配的联系人
    contacts.forEach(contact => {
        if (contact.name.toLowerCase().includes(lowerCaseQuery) || contact.phone.includes(lowerCaseQuery)) {
            addContact(contact.name, contact.phone);
        }
    });

    // 重置搜索框
    searchInput.value = '';
}

3. 实现删除联系人功能

现在，我们已经有了添加和搜索联系人的功能。接下来，我们将实现删除联系人的功能。以下是修改后的app.js文件：

// 删除联系人
function deleteContact(phone) {
    const contactList = document.getElementById('contactList');
    const contacts = document.querySelectorAll('.contact-item');

    contacts.forEach(contact => {
        if (contact.textContent.includes(phone)) {
            contact.remove();
        }
    });
}

// 添加联系人
function addContact(name, phone) {
    const contactList = document.getElementById('contactList');
    const newContact = document.createElement('li');
    newContact.className = 'contact-item';
    newContact.innerHTML = `${name} - <span class="phone">${phone}</span>`;
    newContact.onclick = function() {
        deleteContact(phone);
    };
    contactList.appendChild(newContact);
}

// 搜索联系人
function searchContact(query) {
    // ...（代码与之前相同）
}

// 初始化联系人数据
const contacts = [
    // ...（代码与之前相同）
];

// 在页面加载时添加初始联系人
window.onload = function() {
    contacts.forEach(contact => {
        addContact(contact.name, contact.phone);
    });
};

// 搜索联系人
document.getElementById('searchInput').addEventListener('input', function(e) {
    searchContact(e.target.value);
});

4. 总结

通过以上步骤，我们成功地使用JavaScript实现了一个简单的手机联系人界面。这个界面可以添加、删除和搜索联系人。在实际应用中，你可以根据需求进一步完善这个界面，例如添加更多功能、优化界面样式等。

希望这篇文章能帮助你更好地理解如何使用JavaScript构建联系人界面。祝你学习愉快！

-- 展开阅读全文 --