js怎么做通讯录

在JavaScript中制作通讯录

在JavaScript中制作通讯录，可以通过创建一个数据结构来存储联系人信息、使用表单来输入和编辑联系人、通过DOM操作来显示联系人列表、实现CRUD（创建、读取、更新、删除）功能。其中，使用表单来输入和编辑联系人是一个关键步骤，因为它是用户与通讯录进行交互的主要方式。

使用表单来输入和编辑联系人：首先，我们需要一个HTML表单来输入联系人的基本信息，如名字、电话、邮箱等。然后，我们需要JavaScript来处理表单提交事件，验证输入的数据并将其添加到通讯录的数据结构中。通过这种方式，我们可以确保用户输入的数据是有效的，并且可以动态地更新通讯录。

接下来，我们会详细展开如何使用JavaScript制作一个通讯录。

一、创建数据结构来存储联系人信息

在JavaScript中，我们可以使用数组和对象来存储联系人信息。每个联系人可以表示为一个对象，包含名字、电话、邮箱等属性。我们可以将这些对象存储在一个数组中，方便进行增删改查操作。

let contacts = [];

每个联系人对象的示例：

let contact = {
    id: 1,
    name: "John Doe",
    phone: "123-456-7890",
    email: "john.doe@example.com"
};

二、使用表单来输入和编辑联系人

在HTML中创建一个表单，用户可以通过这个表单输入联系人的信息。我们需要使用JavaScript来处理表单的提交事件。

<form id="contact-form">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <label for="phone">Phone:</label>
    <input type="text" id="phone" name="phone" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <button type="submit">Add Contact</button>
</form>

我们需要一个函数来处理表单提交事件，验证输入的数据，并将新的联系人添加到通讯录中。

document.getElementById('contact-form').addEventListener('submit', function(event) {
    event.preventDefault();
    let name = document.getElementById('name').value;
    let phone = document.getElementById('phone').value;
    let email = document.getElementById('email').value;
    if (name && phone && email) {
        let newContact = {
            id: contacts.length ? contacts[contacts.length - 1].id + 1 : 1,
            name: name,
            phone: phone,
            email: email
        };
        contacts.push(newContact);
        displayContacts();
        this.reset();
    }
});

三、通过DOM操作来显示联系人列表

为了让用户能够查看通讯录中的联系人，我们需要将联系人列表显示在页面上。我们可以使用JavaScript的DOM操作来动态地生成联系人列表。

<ul id="contact-list"></ul>

我们需要一个函数来更新联系人列表的显示：

function displayContacts() {
    let contactList = document.getElementById('contact-list');
    contactList.innerHTML = '';
    contacts.forEach(contact => {
        let listItem = document.createElement('li');
        listItem.innerHTML = `${contact.name} - ${contact.phone} - ${contact.email}`;
        contactList.appendChild(listItem);
    });
}

四、实现CRUD功能

通讯录需要实现CRUD功能，即创建、读取、更新和删除联系人。我们已经实现了创建和读取，接下来我们将实现更新和删除功能。

1、更新联系人

我们需要一个表单来编辑现有的联系人，并更新联系人列表。

<form id="edit-contact-form" style="display: none;">
    <input type="hidden" id="edit-id">
    <label for="edit-name">Name:</label>
    <input type="text" id="edit-name" name="name" required>
    <label for="edit-phone">Phone:</label>
    <input type="text" id="edit-phone" name="phone" required>
    <label for="edit-email">Email:</label>
    <input type="email" id="edit-email" name="email" required>
    <button type="submit">Update Contact</button>
</form>

我们需要一个函数来显示编辑表单，并填充现有联系人的信息：

function editContact(id) {
    let contact = contacts.find(c => c.id === id);
    if (contact) {
        document.getElementById('edit-id').value = contact.id;
        document.getElementById('edit-name').value = contact.name;
        document.getElementById('edit-phone').value = contact.phone;
        document.getElementById('edit-email').value = contact.email;
        document.getElementById('edit-contact-form').style.display = 'block';
    }
}

我们还需要一个函数来处理编辑表单的提交事件，并更新联系人信息：

document.getElementById('edit-contact-form').addEventListener('submit', function(event) {
    event.preventDefault();
    let id = document.getElementById('edit-id').value;
    let name = document.getElementById('edit-name').value;
    let phone = document.getElementById('edit-phone').value;
    let email = document.getElementById('edit-email').value;
    let contact = contacts.find(c => c.id == id);
    if (contact) {
        contact.name = name;
        contact.phone = phone;
        contact.email = email;
        displayContacts();
        this.style.display = 'none';
    }
});

2、删除联系人

我们需要一个函数来删除指定的联系人：

function deleteContact(id) {
    contacts = contacts.filter(c => c.id !== id);
    displayContacts();
}

我们还需要在联系人列表中添加编辑和删除按钮：

function displayContacts() {
    let contactList = document.getElementById('contact-list');
    contactList.innerHTML = '';
    contacts.forEach(contact => {
        let listItem = document.createElement('li');
        listItem.innerHTML = `${contact.name} - ${contact.phone} - ${contact.email}
            <button onclick="editContact(${contact.id})">Edit</button>
            <button onclick="deleteContact(${contact.id})">Delete</button>`;
        contactList.appendChild(listItem);
    });
}

五、优化用户体验

为了提升用户体验，我们可以添加一些额外的功能和优化，例如：

表单验证：在用户提交表单前，验证输入的数据是否有效。
本地存储：将联系人信息存储在浏览器的本地存储中，避免页面刷新后数据丢失。
搜索功能：添加搜索框，用户可以根据名字、电话或邮箱来搜索联系人。
分页显示：当联系人数量较多时，分页显示联系人列表，避免列表过长。

1、表单验证

在JavaScript中，我们可以使用正则表达式来验证输入的数据：

function validateForm(name, phone, email) {
    let phonePattern = /^[0-9-]+$/;
    let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+$/;
    return name && phonePattern.test(phone) && emailPattern.test(email);
}

我们在表单提交时调用这个验证函数：

document.getElementById('contact-form').addEventListener('submit', function(event) {
    event.preventDefault();
    let name = document.getElementById('name').value;
    let phone = document.getElementById('phone').value;
    let email = document.getElementById('email').value;
    if (validateForm(name, phone, email)) {
        let newContact = {
            id: contacts.length ? contacts[contacts.length - 1].id + 1 : 1,
            name: name,
            phone: phone,
            email: email
        };
        contacts.push(newContact);
        displayContacts();
        this.reset();
    } else {
        alert('Invalid input');
    }
});

2、本地存储

我们可以使用浏览器的本地存储功能，将联系人信息存储在本地，以便页面刷新后数据不会丢失：

function saveContacts() {
    localStorage.setItem('contacts', JSON.stringify(contacts));
}
function loadContacts() {
    let storedContacts = localStorage.getItem('contacts');
    if (storedContacts) {
        contacts = JSON.parse(storedContacts);
    }
}
window.onload = function() {
    loadContacts();
    displayContacts();
};
document.getElementById('contact-form').addEventListener('submit', function(event) {
    event.preventDefault();
    let name = document.getElementById('name').value;
    let phone = document.getElementById('phone').value;
    let email = document.getElementById('email').value;
    if (validateForm(name, phone, email)) {
        let newContact = {
            id: contacts.length ? contacts[contacts.length - 1].id + 1 : 1,
            name: name,
            phone: phone,
            email: email
        };
        contacts.push(newContact);
        saveContacts();
        displayContacts();
        this.reset();
    } else {
        alert('Invalid input');
    }
});
document.getElementById('edit-contact-form').addEventListener('submit', function(event) {
    event.preventDefault();
    let id = document.getElementById('edit-id').value;
    let name = document.getElementById('edit-name').value;
    let phone = document.getElementById('edit-phone').value;
    let email = document.getElementById('edit-email').value;
    let contact = contacts.find(c => c.id == id);
    if (contact) {
        contact.name = name;
        contact.phone = phone;
        contact.email = email;
        saveContacts();
        displayContacts();
        this.style.display = 'none';
    }
});

3、搜索功能

我们可以在页面上添加一个搜索框，用户可以输入关键词来搜索联系人：

<input type="text" id="search" placeholder="Search contacts">

我们需要一个函数来处理搜索框的输入事件，并根据关键词过滤联系人列表：

document.getElementById('search').addEventListener('input', function(event) {
    let keyword = event.target.value.toLowerCase();
    let filteredContacts = contacts.filter(contact => 
        contact.name.toLowerCase().includes(keyword) ||
        contact.phone.toLowerCase().includes(keyword) ||
        contact.email.toLowerCase().includes(keyword)
    );
    displayFilteredContacts(filteredContacts);
});
function displayFilteredContacts(filteredContacts) {
    let contactList = document.getElementById('contact-list');
    contactList.innerHTML = '';
    filteredContacts.forEach(contact => {
        let listItem = document.createElement('li');
        listItem.innerHTML = `${contact.name} - ${contact.phone} - ${contact.email}
            <button onclick="editContact(${contact.id})">Edit</button>
            <button onclick="deleteContact(${contact.id})">Delete</button>`;
        contactList.appendChild(listItem);
    });
}

4、分页显示

当联系人数量较多时，我们可以分页显示联系人列表，避免列表过长。我们需要一个函数来生成分页按钮，并根据当前页码显示联系人：

<div id="pagination"></div>

我们需要一个函数来更新分页显示：

let currentPage = 1;
let contactsPerPage = 10;
function displayContacts() {
    let contactList = document.getElementById('contact-list');
    contactList.innerHTML = '';
    let start = (currentPage - 1) * contactsPerPage;
    let end = start + contactsPerPage;
    let paginatedContacts = contacts.slice(start, end);
    paginatedContacts.forEach(contact => {
        let listItem = document.createElement('li');
        listItem.innerHTML = `${contact.name} - ${contact.phone} - ${contact.email}
            <button onclick="editContact(${contact.id})">Edit</button>
            <button onclick="deleteContact(${contact.id})">Delete</button>`;
        contactList.appendChild(listItem);
    });
    displayPagination();
}
function displayPagination() {
    let pagination = document.getElementById('pagination');
    pagination.innerHTML = '';
    let totalPages = Math.ceil(contacts.length / contactsPerPage);
    for (let i = 1; i <= totalPages; i++) {
        let pageButton = document.createElement('button');
        pageButton.innerHTML = i;
        pageButton.onclick = function() {
            currentPage = i;
            displayContacts();
        };
        pagination.appendChild(pageButton);
    }
}

通过以上步骤，我们可以使用JavaScript制作一个功能完整的通讯录应用。这个应用支持创建、读取、更新和删除联系人，并提供了表单验证、本地存储、搜索和分页显示功能。希望这些内容对你有所帮助，如果你需要进一步的优化或功能扩展，可以根据具体需求进行调整。