js实现手机联系人效果

要实现类似手机联系人的效果，可以使用JavaScript结合HTML和CSS来完成。以下是一个简单的示例，展示了如何实现一个基本的联系人列表，包括搜索功能和联系人分组。

基础概念

HTML结构：用于定义页面的基本结构。
CSS样式：用于美化页面，使其看起来像手机联系人界面。
JavaScript逻辑：用于处理用户交互，如搜索和显示联系人。

优势

用户体验：模拟真实的手机联系人界面，提升用户体验。
可扩展性：可以轻松添加更多功能，如联系人详情页、编辑功能等。
响应式设计：适应不同屏幕尺寸，适合移动设备。

类型

静态联系人列表：预先定义好的联系人数据。
动态联系人列表：从服务器获取联系人数据。

应用场景

移动应用：模拟手机联系人界面。
网页应用：提供类似手机的联系人管理功能。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phone Contacts</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="contact-app">
        <input type="text" id="search" placeholder="Search contacts...">
        <div id="contacts"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
}

.contact-app {
    width: 300px;
    margin: 0 auto;
}

#search {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.contact-item {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.contact-name {
    font-weight: bold;
}

.contact-number {
    color: #666;
}

JavaScript (script.js)

const contactsData = [
    { name: 'Alice', number: '123-456-7890' },
    { name: 'Bob', number: '987-654-3210' },
    { name: 'Charlie', number: '555-555-5555' },
    // Add more contacts as needed
];

function renderContacts(contacts) {
    const contactsContainer = document.getElementById('contacts');
    contactsContainer.innerHTML = '';
    contacts.forEach(contact => {
        const contactItem = document.createElement('div');
        contactItem.className = 'contact-item';
        contactItem.innerHTML = `
            <div class="contact-name">${contact.name}</div>
            <div class="contact-number">${contact.number}</div>
        `;
        contactsContainer.appendChild(contactItem);
    });
}

function searchContacts() {
    const searchInput = document.getElementById('search').value.toLowerCase();
    const filteredContacts = contactsData.filter(contact => 
        contact.name.toLowerCase().includes(searchInput) || 
        contact.number.includes(searchInput)
    );
    renderContacts(filteredContacts);
}

document.getElementById('search').addEventListener('input', searchContacts);

// Initial render
renderContacts(contactsData);

解释

HTML：定义了一个简单的页面结构，包括一个搜索框和一个用于显示联系人的容器。
CSS：设置了基本的样式，使页面看起来更像手机联系人界面。
JavaScript：
- contactsData：包含静态的联系人数据。
- renderContacts：根据传入的联系人数组渲染联系人列表。
- searchContacts：根据搜索框的输入过滤联系人并重新渲染列表。
- 事件监听器：监听搜索框的输入事件，实时更新联系人列表。