js+jquery+html实现纯前端通讯录

最新推荐文章于 2023-12-02 10:54:53 发布

原创

最新推荐文章于 2023-12-02 10:54:53 发布 · 888 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #jquery

本文介绍了如何使用JavaScript、jQuery和HTML来创建一个纯前端的通讯录应用，涵盖了联系人的添加、删除、修改和查看详细信息功能，并利用localStorage进行前端数据缓存。同时，涉及到用户名和手机号的输入验证。

使用js+jquery+html实现纯前端通讯录，包括联系人的增删改查以及展示详情

html部分代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <title>通讯录</title>
</head>
<style>
    .Contact {
     
     
        display: none;
        position: absolute;
        top: 20%;
        left: 34%;
        background-color: white;
        z-index: 2;
        width: 500px;
        height: 420px;
    }

    .Contact h2 {
     
     
        padding: 5px 20px;
        font-size: large;
        background-color: #555555;
        color: white;
    }

    .Contact .ifm {
     
     
        width: 300px;
        margin: 10px auto;
        display: flex;
        flex-flow: column nowrap;
    }

    .Contact .ifm div {
     
     
        margin: 10px;
    }

    .Contact .ifm div input {
     
     
        width: 220px;
        height: 20px;
    }

    .Contact .scbt {
     
     
        float: right;
        margin-top: 6px;
        margin-right: 30px;
    }

    .Contact .scbt button:first-of-type {
     
     
        width: 85px;
        height: 36px;
        background-color: #5cb85c;
    }

    .Contact .scbt button:last-of-type {
     
     
        width: 85px;
        height: 36px;
        background-color: white;
    }

    table {
     
     
        margin: 0 auto;
        width: 90%;
        text-align: center;
    }
</style>

<body onload="showStorage()">
    <div>
        <hr />
        <h1>通讯录</h1>
        <hr />
        <!-- 展示消息 -->
        <div>
            <div>
                <button id="add">新增</button>
                <script>
                    //点击新增按钮触发的动作
                    $("#add").click(function () {
     
     
                        $("#addContact").show();
                    });
                </script>
                <div>
                    <input type="text" name="person" id="search" placeholder="请输入联系人姓名">
                    <button type="button" onclick="search()">搜索</button>
                </div>
            </div>
            <table>
                <tbody>
                    <tr id="thead">
                        <td>序号</td>
                        <td>姓名</td>
                        <td>电话号</td>
                        <td>操作</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 新增联系人块 -->
    <div class="Contact" id="addContact">
        <h2