用html、js、css实现通讯录功能

最新推荐文章于 2023-10-09 17:33:26 发布
最新推荐文章于 2023-10-09 17:33:26 发布
阅读量9.8k 收藏 37
点赞数 3
分类专栏： 前端 文章标签： 通讯录 js html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z707960209/article/details/81215454
版权
  • 实现点击字母跳转时，用到了锚点（可以百度到）
  • 在这里用aui的布局举例
  • 在这里用api的框架
  • 此代码为移动端

话不多说，直接上代码

代码块

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>通讯录</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../iconfont/iconfont.css" />
    <link rel="stylesheet" href="../css/aui.css">
    <style>
    /**全部的样式start**/

        body {
            color: #363636;
            background-color: #f6f6f6;
        }

        p {
            display: inline;
            color: #868686;
        }
        /**全部的样式end**/
        /**顶部导航栏start**/
        /**顶部导航栏背景色start**/
        /*.head {
            background: #303030;
        }*/
        /**顶部导航栏背景色end**/
        /*顶部导航栏置顶start*/
        /*.aui-bar {
            position: fixed;
        }*/
        /*顶部导航栏置顶end*/
        /**顶部导航栏end**/
        /**主要内容部分start**/
        /*.main{
          margin-top: 3.5rem;
        }*/
    /*修改下划线样式start*/
    .aui-list .aui-list-item {
        background: none;
    }
    .aui-media-list-item-inner {
        margin-right: 1.25rem;
        border-bottom: 1px #f6f6f6 solid;
    }
    .aui-list {
        background: none;
    }
    /*修改下划线样式end*/
    /*头像框的样式及间距start*/
    .aui-list .aui-list-item-media {
        width: 3.5rem;
        padding: 0.5rem 0.75rem 0.5rem 0.75rem;
    }
    .aui-list .aui-list-item {
        color: #363636;
        min-height: 3.5rem;
        background: none;
    }
    /*头像框的样式及间距end*/
    /*修改灰色字色start*/
    .aui-list .aui-list-item-text {
        color: #868686;
    }
    /*修改灰色字色end*/
    /*修改姓名职业的间距字色start*/
    .aui-list .aui-list-item-title {
        color: #363636;
    }
    .career {
        color: #363636 !important;
    }
    .name {
        font-weight: bolder;
    }
    /*修改姓名职业的间距字色end*/
    /*电话图标样式start*/
    .icon {
        color: #868686;
    }
    .icon-active {
        color: #F5862D!important;
    }
    /*电话图标样式end*/
    /*左边字母样式start*/
    .letter_left_single {
        line-height: 3.5rem;
        text-align: center;
        display: inline;
        float: left;
    }
    .color_white {
        color: #fff;
    }
    /*左边字母样式end*/
    /*右边字母样式start*/
    .right-letter {
        width: 5%;
        height: 600;
        position: fixed;
        right: 0.5rem;
        top: 2rem;
        z-index: 999;
    }
    .letter_single {
        margin: 0;
        color: #bcbcbc;
        font-size: 0.6rem;
        text-align: center;
        display: block;
    }
    .test {
        font-size: 0.6rem;
    }
    .orange {
        color: #f5862d;
    }
    .big {
        background: #fce4b2;
        opacity: 0.7;
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 1.3rem;
        text-align: center;
        line-height: 2.2rem;
        position: fixed;
        right: 3.5rem;
        top: 4rem;
        color: #f5862d;
        font-size: 1.3rem;
        display: none;
    }
    .big-active {
        display: block;
    }
    /*右边字母样式end*/
    /**主要内容部分end**/
    </style>
</head>

<body>
    <!-- 顶部导航栏 -->
    <!-- <header class="aui-bar aui-bar-nav aui-clearfix head" id="header">
        <a class="aui-pull-left aui-btn" onclick="my()">
            <span class="iconfont icon-back"></span>
        </a>
        <div class="aui-title aui-font-size-18">通讯录</div>
        <div class="aui-text aui-pull-right aui-font-size-14" onclick="post()">按首字母</div>
    </header> -->
    <!-- 主要内容部分 -->
    <div class="main aui-clearfix">
        <!-- 右边字母 -->
        <div class="right-letter" onclick="change()">
            <ul class="test" id="test">
                <li class="big" id="big">A</li>//字母点击变大的效果
                <a href="#first" class="letter_single">#</a>
                <a href="#a" class="letter_single">A</a>
                <a href="#b" class="letter_single">B</a>
                <a href="#c" class="letter_single">C</a>
                <a href="#d" class="letter_single">D</a>
                <a href="#e" class="letter_single">E</a>
                <a href="#f" class="letter_single">F</a>
                <a href="#g" class="letter_single">G</a>
                <a href="#h" class="letter_single">H</a>
                <a href="#i" class="letter_single">I</a>
                <a href="#j" class="letter_single">J</a>
                <a href="#k" class="letter_single">K</a>
                <a href="#l" class="letter_single">L</a>
                <a href="#m" class="letter_single">M</a>
                <a href="#n" class="letter_single">N</a>
                <a href="#o" class="letter_single">O</a>
                <a href="#p" class="letter_single">P</a>
                <a href="#q" class="letter_single">Q</a>
                <a href="#r" class="letter_single">R</a>
                <a href="#s" class="letter_single">S</a>
                <a href="#t" class="letter_single">T</a>
                <a href="#u" class="letter_single">U</a>
                <a href="#v" class="letter_single">V</a>
                <a href="#w" class="letter_single">W</a>
                <a href="#x" class="letter_single">X</a>
                <a href="#y" class="letter_single">Y</a>
                <a href="#z" class="letter_single">Z</a>

            </ul>
        </div>

        <!-- 通讯录 -->
        <div class="contacts" id="contacts"></div>
        <div class="aui-card-list">
            <div class="aui-card-list-content">
                <ul class="aui-list aui-media-list">
                    <li class="aui-list-item aui-list-item-middle aui-clearfix">
                        <p class="letter_left_single" id="first">#</p>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media">
                                <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <div class="aui-list-item-text aui-list-item-left">
                                            <div class="aui-list-item-title aui-font-size-16 name">007</div>
                                            <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服务员</div>
                                        </div>
                                        <div class="aui-list-item-text">
                                            10086
                                        </div>
                                    </div>
                                    <a href="tel:10086">
                                        <div class="aui-list-item-right icon-more-info">
                                            <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle aui-clearfix">
                        <p class="letter_left_single color_white" id="first">#</p>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media">
                                <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <div class="aui-list-item-text aui-list-item-left">
                                            <div class="aui-list-item-title aui-font-size-16 name">008</div>
                                            <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服务员</div>
                                        </div>
                                        <div class="aui-list-item-text">
                                            10086
                                        </div>
                                    </div>
                                    <a href="tel:10086">
                                        <div class="aui-list-item-right icon-more-info">
                                            <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle aui-clearfix">
                        <p class="letter_left_single" id="a">A</p>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media">
                                <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <div class="aui-list-item-text aui-list-item-left">
                                            <div class="aui-list-item-title aui-font-size-16 name">阿里</div>
                                            <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服务员</div>
                                        </div>
                                        <div class="aui-list-item-text">
                                            10086
                                        </div>
                                    </div>
                                    <a href="tel:10086">
                                        <div class="aui-list-item-right icon-more-info">
                                            <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle aui-clearfix">
                        <p class="letter_left_single" id="e">E</p>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media">
                                <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <div class="aui-list-item-text aui-list-item-left">
                                            <div class="aui-list-item-title aui-font-size-16 name">Ella</div>
                                            <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服务员</div>
                                        </div>
                                        <div class="aui-list-item-text">
                                            10086
                                        </div>
                                    </div>
                                    <a href="tel:10086">
                                        <div class="aui-list-item-right icon-more-info">
                                            <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle aui-clearfix">
                        <p class="letter_left_single" id="f">F</p>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media">
                                <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <div class="aui-list-item-text aui-list-item-left">
                                            <div class="aui-list-item-title aui-font-size-16 name">弗里恩</div>
                                            <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服务员</div>
                                        </div>
                                        <div class="aui-list-item-text">
                                            10086
                                        </div>
                                    </div>
                                    <a href="tel:10086">
                                        <div class="aui-list-item-right icon-more-info">
                                            <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle aui-clearfix">
                        <p class="letter_left_single" id="g">G</p>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media">
                                <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <div class="aui-list-item-text aui-list-item-left">
                                            <div class="aui-list-item-title aui-font-size-16 name">哥哥</div>
                                            <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服务员</div>
                                        </div>
                                        <div class="aui-list-item-text">
                                            10086
                                        </div>
                                    </div>
                                    <a href="tel:10086">
                                        <div class="aui-list-item-right icon-more-info">
                                            <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle aui-clearfix">
                        <p class="letter_left_single" id="k">K</p>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media">
                                <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <div class="aui-list-item-text aui-list-item-left">
                                            <div class="aui-list-item-title aui-font-size-16 name">卡卡西</div>
                                            <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服务员</div>
                                        </div>
                                        <div class="aui-list-item-text">
                                            10086
                                        </div>
                                    </div>
                                    <a href="tel:10086">
                                        <div class="aui-list-item-right icon-more-info">
                                            <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle aui-clearfix">
                        <p class="letter_left_single" id="n">N</p>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media">
                                <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <div class="aui-list-item-text aui-list-item-left">
                                            <div class="aui-list-item-title aui-font-size-16 name">娜娜</div>
                                            <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服务员</div>
                                        </div>
                                        <div class="aui-list-item-text">
                                            10086
                                        </div>
                                    </div>
                                    <a href="tel:10086">
                                        <div class="aui-list-item-right icon-more-info">
                                            <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle aui-clearfix">
                        <p class="letter_left_single" id="o">O</p>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media">
                                <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <div class="aui-list-item-text aui-list-item-left">
                                            <div class="aui-list-item-title aui-font-size-16 name">偶像</div>
                                            <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服务员</div>
                                        </div>
                                        <div class="aui-list-item-text">
                                            10086
                                        </div>
                                    </div>
                                    <a href="tel:10086">
                                        <div class="aui-list-item-right icon-more-info">
                                            <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle aui-clearfix">
                        <p class="letter_left_single" id="p">P</p>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media">
                                <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <div class="aui-list-item-text aui-list-item-left">
                                            <div class="aui-list-item-title aui-font-size-16 name">皮卡丘</div>
                                            <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服务员</div>
                                        </div>
                                        <div class="aui-list-item-text">
                                            10086
                                        </div>
                                    </div>
                                    <a href="tel:10086">
                                        <div class="aui-list-item-right icon-more-info">
                                            <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle aui-clearfix">
                        <p class="letter_left_single" id="q">Q</p>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media">
                                <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <div class="aui-list-item-text aui-list-item-left">
                                            <div class="aui-list-item-title aui-font-size-16 name">QAQ</div>
                                            <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服务员</div>
                                        </div>
                                        <div class="aui-list-item-text">
                                            10086
                                        </div>
                                    </div>
                                    <a href="tel:10086">
                                        <div class="aui-list-item-right icon-more-info">
                                            <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle aui-clearfix">
                        <p class="letter_left_single" id="s">S</p>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media">
                                <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <div class="aui-list-item-text aui-list-item-left">
                                            <div class="aui-list-item-title aui-font-size-16 name">斯内克</div>
                                            <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服务员</div>
                                        </div>
                                        <div class="aui-list-item-text">
                                            10086
                                        </div>
                                    </div>
                                    <a href="tel:10086">
                                        <div class="aui-list-item-right icon-more-info">
                                            <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle aui-clearfix">
                        <p class="letter_left_single" id="t">T</p>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media">
                                <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <div class="aui-list-item-text aui-list-item-left">
                                            <div class="aui-list-item-title aui-font-size-16 name">兔子</div>
                                            <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服务员</div>
                                        </div>
                                        <div class="aui-list-item-text">
                                            10086
                                        </div>
                                    </div>
                                    <a href="tel:10086">
                                        <div class="aui-list-item-right icon-more-info">
                                            <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle aui-clearfix">
                        <p class="letter_left_single" id="u">U</p>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media">
                                <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <div class="aui-list-item-text aui-list-item-left">
                                            <div class="aui-list-item-title aui-font-size-16 name">UFO</div>
                                            <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服务员</div>
                                        </div>
                                        <div class="aui-list-item-text">
                                            10086
                                        </div>
                                    </div>
                                    <a href="tel:10086">
                                        <div class="aui-list-item-right icon-more-info">
                                            <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-middle aui-clearfix">
                        <p class="letter_left_single" id="z">Z</p>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media">
                                <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <div class="aui-list-item-text aui-list-item-left">
                                            <div class="aui-list-item-title aui-font-size-16 name">zzz</div>
                                            <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服务员</div>
                                        </div>
                                        <div class="aui-list-item-text">
                                            10086
                                        </div>
                                    </div>
                                    <a href="tel:10086">
                                        <div class="aui-list-item-right icon-more-info">
                                            <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/APICloud-rest-SHA10.js"></script>
<script type="text/javascript" src="../script/APICloud-rest-SHA1.js"></script>
<script type="text/javascript">
    apiready = function() {
    }
    //点击放大代码
    var letterSize; //单个字母的字体大小
    var big = document.getElementById('big');
    var menus;
    var test2 = document.getElementById("test");
    var x = test2.getElementsByTagName("a");

    function change() {
        // alert(1);
        // alert($(obj).text());
        //div点击事件
        //把状态设为放大状态
        for (var i = 0; i < x.length; i++) {
            x[i].index = i;
            x[i].onclick = function() {
                for (var i = 0; i < x.length; i++) {
                    x[i].style.color = "#BCBCBC";
                }
                x[this.index].style.color = "#F5862d";
                var a = x[this.index].text;
                $("#big").html(a);
                $api.addCls(big, 'big-active');
                setTimeout(remove, 5000);
            }
        }
    }

    function remove() {
        $api.removeCls(big, 'big-active');
    }
</script>

</html>

效果如图：
由于个人原因。需把头像和电话号打码，此处仅为部分图片，具体效果复制粘贴我的代码预览即可看到！

api、aui框架链接https://www.apicloud.com

z707960209
关注
  • 3
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
html5 通讯录
06-04
html5 通讯录示例，可以参考下 html5宝典里面的
编写一个通讯录网页
最新发布
weixin_66395717的博客
12-02 387
2..CSS部分要求综合使用字体/背景色/渐变/阴影/内外边距/边框/边框弧度等技。3.JS部分要求实现添加通讯录的一条记录，展示通讯录中同学信息，信息至少。1.HTML部分要求有标题栏/操作栏/表格区域/版权区域。含姓名/电话/邮箱/QQ号等。术将网页效果做的好看一些。
手把手教你用js实现手机通讯录功能（附源码）
杜永康的博客
03-03 3851
当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。a标签里href的属性值，用#id表示，分别与左侧列表里的div的id名字一一对应，即可实现点击跳转，这一特点也叫锚点，这在css里还是挺高级的。换句话说，如果不使用这个属性，那么在锚点跳转过程中，会突然跳转到相应位置，非常生硬，用户体验感比较差。创作不易，如果对你有帮助，请三连支持。
servlet+html实现简易通讯录（网页版）
qq_46212498的博客
09-23 2115
servlet+java类+html制作简易网页版通讯录实现增删查改功能 首先科普一下Java中的list表相关知识 链接:https://www.cnblogs.com/tigerlion/p/11179202.html 实验效果 项目结构图 在制作的时候可以将任务小化，比如先实现增加联系人的功能，后面再逐个实现删，查，改的功能。（这样效率快些，至少对我来说） AddPeople.html <!DOCTYPE html> <html> <head> <
HTML+CSS+JS（+Vue）写一个通讯录组件
 我的博客
12-15 759
求各位大大的Star(*/ω＼*)。 没有录屏，所以上传的是图片。后面已补充录屏效果。 效果：（主要是参考小米Note3的通讯录的效果做的） 主要功能： 1. 滚动后，通讯录的模块标题会固定在顶部（图2） 2. 下一个标题很接近时，将上一个标题推上去的效果（过程：图3、图4、图5） 实现： 1. 模块标题会固定在顶部：这个实现比较简单，监听滚动的距离，如果大于0（相对的0）就显示固定的标题。 2. 推上去的效果：实际上是修改固定的标题的top值，导致的视觉错觉。当下一个标题距离顶部.
纯css实现手机通讯录
weixin_33901641的博客
10-17 1086
我们经常在手机上看到通讯录列表，这类布局一般有两个显著的效果 首字母吸顶 快速定位 下面我们来实现一下 页面结构 这里页面结构很简单，就是两个列表 <div class="con"> <!--联系人列表--> <div class="contacts" id="contacts">...
vue实现通讯录功能
10-18
在Vue.js中实现通讯录功能是一项常见的前端任务，它涉及到数据管理、用户交互以及界面布局等多个方面。以下是如何使用Vue来构建一个简单的通讯录应用的关键知识点： 1. **组件化开发**：Vue的核心特性之一是组件化...
【JavaScript源代码】JavaScript实现通讯录功能.docx
12-29
JavaScript 实现通讯录功能主要涉及前端网页开发，利用JavaScript进行动态交互处理，配合CSS样式美化界面。以下将详细解析给出的代码片段，并介绍相关知识点。 首先，从`index.css`中可以看出，这是一个基本的CSS...
html5仿手机通讯录按字母排序及搜索功能
03-23
在提供的压缩包文件中，可能包含了实现这些功能的HTML、CSS和JavaScript代码，你可以通过阅读和学习这些代码来深入理解上述知识点。同时，也可以参考同名文章以获取更详细的解释和示例。 总的来说，实现HTML5仿手机...
原生JS实现微信通讯录
11-20
总的来说，原生JS实现微信通讯录的效果是一个涉及HTML、CSS和JavaScript综合运用的挑战，需要对触摸事件、DOM操作和CSS布局有深入理解。通过这个案例，我们可以学习如何在没有依赖库的情况下创建高性能的移动端交互...
通讯录（JSP+MySql+Html+JavaScript）项目实例及源码
08-10
myEclipse内置Tomcat运行，可实现基本的增删改查。管理员可以对用户信息和用户通信录进行各种操作，用户登录后可查看自己的通讯录。
js+jquery+html实现纯前端通讯录
qq_51290691的博客
10-09 378
使用js+jquery+html实现的纯前端通讯录，包括对联系人的增删改查以及展示详情
HTML 制作一个通讯录
weixin_48416160的博客
06-22 4422
文章目录 1.HTML 1.1HTML的结构 1.2常用标签 2.代码展示 3.结果演示 1.HTML 1.1HTML的结构 <!DOCTYPE HTML> <HTML> <HEAD></HEAD> <BODY></BODY> </HTML> <!DOCTYPE HTML> 1.2 常用标签 标题标签:指定特定样式字体的一组标签 ...
HTML5CSS3网页设计仿微信通讯录页
qq_65208855的博客
06-24 1707
上次发了首页，想了一下，还是打算把通讯录页也发一下//仅供学习参考，大多用到div的各种设置，侧边导航栏设置，css对盒模型的浮动、弹性、固定定位等设置，还有底部小细节//
HTML+CSS 制作联系人页面（可自适应）
热门推荐
qq_25503949的博客
05-18 4万+
HTML+CSS 制作联系人页面 原视频链接 HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta content="width=device-width,initial-sca
H5页面制作通讯录
qq_36408699的博客
01-05 2046
H5通讯录，功能为可通过拼音查询，按字母排序。
html 网页联系人,HTML+CSS网页制作实例:制作联系人网页表单
weixin_31879641的博客
06-24 1342
网页制作文章简介：在本文中，我们将使用HTML和CSS创建一个传统手写风格的联系人表单，示例会用到初中级CSS技术来创建信纸的外观，然后使用CSS的@font-face属性将数码文字转换成手写风格。在本文中，我们将使用HTML和CSS创建一个传统手写风格的联系人表单，示例会用到初中级CSS技术来创建信纸的外观，然后使用CSS的@font-face属性将数码文字转换成手写风格。希望本教程对你有所帮助...
CSS+html+js人员信息表
liaojsgtcg的博客
10-05 522
给查询，修改，删除，加入具体操作 查看 function view(currentObj) { var stuNo = currentObj.parentNode.parentNode.children[1].innerHTML; var name = currentObj.parentNode.parentNode.children[2].innerHTML; var major = currentObj.parentNode.parentNode.children[3].innerHTML; aler
使用 HTML、CSS 和 JavaScript 创建交互式联系表单
我的博客，不一样的自我表达
07-02 153
联系表格不仅仅是网站访问者与您联系的一种方式。这也是收集有关他们的宝贵信息并更好地了解他们的需求的机会。在本指南中，我们将引导您完成使用 HTML、CSS 和 JavaScript 创建现代交互式联系表单的过程。使用 HTML 和 CSS 设计表单首先，让我们设置表单的 HTML 结构。
h5 实现微信通讯录功能
04-24
好的，我可以为您解答这个问题。 首先，要在页面上展示微信通讯录，可以使用 HTML 和 CSS 完成页面布局和样式设置。然后，需要使用 JavaScript 与后端进行交互，获取用户通讯录数据并展示在页面上。 具体实现的步骤如下： 1. 使用 HTML 和 CSS 完成页面布局和样式设置，包括通讯录联系人列表、搜索框等。 2. 使用 JavaScript 发送 Ajax 请求获取用户通讯录数据。可以使用后端提供的接口，或者通过微信开放平台提供的接口来获取数据。 3. 将获取到的数据展示在页面上。可以通过遍历数据，生成 HTML 元素，并将其添加到通讯录列表中。同时，可以提供搜索框，帮助用户快速查找联系人。 4. 若需要实现添加、删除联系人等功能，可以通过再次向后端发送请求并刷新页面的方式实现。 以上就是简单的实现微信通讯录功能的步骤。希望能帮到您。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值