开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js实现qq联系人列表

要实现一个类似QQ的联系人列表，我们可以使用JavaScript结合HTML和CSS来完成。以下是一个简单的示例，展示如何使用JavaScript动态生成联系人列表，并提供一些基础的功能，如添加、删除联系人。

基础概念

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>QQ联系人列表</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="contact-list">
        <ul id="contacts"></ul>
    </div>
    <form id="add-contact-form">
        <input type="text" id="name" placeholder="姓名">
        <input type="text" id="phone" placeholder="电话">
        <button type="submit">添加联系人</button>
    </form>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

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

#contact-list {
    width: 300px;
    margin: auto;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

form {
    margin-top: 20px;
}

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const contactsList = document.getElementById('contacts');
    const addContactForm = document.getElementById('add-contact-form');
    const nameInput = document.getElementById('name');
    const phoneInput = document.getElementById('phone');

    // 模拟存储联系人数据
    let contacts = [];

    // 加载已有联系人
    function loadContacts() {
        contactsList.innerHTML = '';
        contacts.forEach(contact => {
            const li = document.createElement('li');
            li.textContent = `${contact.name} - ${contact.phone}`;
            const deleteButton = document.createElement('button');
            deleteButton.textContent = '删除';
            deleteButton.onclick = function() {
                deleteContact(contact);
            };
            li.appendChild(deleteButton);
            contactsList.appendChild(li);
        });
    }

    // 添加联系人
    addContactForm.onsubmit = function(event) {
        event.preventDefault();
        const name = nameInput.value.trim();
        const phone = phoneInput.value.trim();
        if (name && phone) {
            contacts.push({ name, phone });
            loadContacts();
            nameInput.value = '';
            phoneInput.value = '';
        }
    };

    // 删除联系人
    function deleteContact(contact) {
        const index = contacts.indexOf(contact);
        if (index > -1) {
            contacts.splice(index, 1);
            loadContacts();
        }
    }
});

优势与应用场景

动态交互: 使用JavaScript可以实现动态添加和删除联系人，提升用户体验。
数据管理: 可以通过JavaScript管理联系人数据，便于存储和检索。
响应式设计: 结合CSS可以实现响应式布局，适应不同设备的屏幕尺寸。

可能遇到的问题及解决方法

数据持久化: 如果需要保存联系人数据，可以使用浏览器的localStorage或服务器端数据库。
性能问题: 当联系人列表很长时，频繁操作DOM可能导致性能下降。可以使用虚拟列表技术优化性能。
输入验证: 需要对用户输入进行验证，确保数据的正确性和安全性。

通过上述代码和解释，你可以实现一个基本的QQ联系人列表功能，并了解相关的概念和技术细节。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

调用系统联系人列表

调用系统联系人列表 Intent intent = new Intent(Intent.ACTION_PICK, Contacts.CONTENT_URI); startActivityForResult... } 11 } 12 super.onActivityResult(requestCode, resultCode, intent); 13 } 解析联系人信息

7125 0

js解密之QQ的bkn值，获取QQ群成员信息，获取QQ好友列表信息

QQ群网站：https://qun.qq.com/member.html 咳咳，没别的，就是想看下群员而已，希望大家拿到信息后，不要忘记你所处之地，虽然只是群信息，没什么隐私资料，本来我只是想获取一下...QQ群成员信息，然后我在这个网站转了一下之后，发现不仅可以获取群员还可以获取你的QQ好友列表的一些信息，哈哈然后我准备在这，用我列表的QQ昵称做一张词云图。...首先呢，来到群管理这个页面，一如既往，打开F12，切换到一个QQ群，然后点击XHR，就可以看到一条信息的加载了预览一下返回信息，可以很清晰的看见mems只有两个，和真实情况一样，QQ群里面只有我和一个机器人...然后回到页面，来换一个QQ群。www.lanol.cn 然后就卡在了第一个断点处，F9看下。www.lanol.cn 这里有个Cookie，然后取Cookie里面的skey。...然后Cookie的话就是自己手动获取，或者等下次再出一个python登陆QQ的博文然后将这串不怎么麻烦的加密代码（总感觉有点不太真实）放到Python里面运算一下可以看到结果是一样的。

6K2 0

Android笔记：获取手机联系人列表

下面直接贴代码 1.先写一个实体类,来放名字和号码 public class PhoneDto { private String name; //联系人姓名...telPhone) { this.name = name; this.telPhone = telPhone; } } 2.写我们获取联系人的工具类...public final static String NUM = ContactsContract.CommonDataKinds.Phone.NUMBER; // 联系人姓名...ContactsContract.CommonDataKinds.Phone.DISPLAY_NAME; //上下文对象 private Context context; //联系人提供者的...public PhoneUtil(Context context){ this.context = context; } //获取所有联系人

6252 0

Android仿TIM、QQ的好友列表的实现（recycleview实现）

recycleview.gif 整体思路： RecyclerView 是一个增强版的ListView,不仅可以实现和ListView同样的效果,还优化了ListView中存在的各种不足之处。...这里使用recycleviewAdapter的BRAVH框架中的树状列表，在adapter中添加两个样式，一个是分组的样式，一个是好友信息的样式。...android:layout_height="wrap_content"> 新建两个layout样式分别为好友列表的样式和好友信息的样式...，在树状列表中引用这两个样式。...Adapter Adapter采用BRAVH https://www.jianshu.com/p/b343fcff51b0 这个adapter里面可以改变item加载的动画，一些单击事件，如果要实现点击好友头像进入好友信息界面

2.6K2 0

仿联系人列表页的轮子GroupingViewSample

GroupingViewSample 制作类似联系人页面所需要的Slider，还有用来给recyclerview进行分组的ItemDecoration，我觉得最实用的地方是可以用xml来画对应部分的布局...SliderView 简介：这是一个列表view，继承自Linearlayout，可实现水平或垂直布局，主要作用是当手指划过或点击某个里面的item的时候会有相应的回调 interface ItemListener...GroupDecoration 简介：可以自己控制列表的分组规则和分组标题的样式，而且可以用xml绘制分组标题用法：像所有其他的ItemDecoration一样，add到recyclerview上就可以了...，主要需要实现下面几个方法 //判断当前position的数据是否是一个组的第一个，也就是需要加分组item的position abstract fun checkItemIsFirstOfGroup

5071 0

QQ客服右侧悬浮JS实现代码

uin=10000"><img src="http://wpa.qq.com/pa?

4.7K4 0

UITableView实现QQ好友列表实战(动态插入删除Cell)

实现选择网上大部分的教程，都是基于修改section的hearderView来实现的，但是看QQ的好友列表，style是grouped，显然不是使用section的header来处理。...使用section的hearderView来实现的，十分简单，网上也有很多源码和教程，只要刷新一下dataSource然后调用就可以了。不在本次讨论的范围之内。...(目测QQ好友列表没有使用动画特效，可能是因为好友列表过于大，内存占用问题或者是用户体验问题。)...具体实现分析 TableView一些相关方法介绍 delegate里和点击有关的方法如下。...下面是我的willSelect里的实现代码。

1.3K5 0

Exchange 2010 OWA Lync联系人列表故障案例

Exchange 2010 OWA 与 Lync 2010 的IM集成已经稳定运行几年，突然接用户反馈打开Exchange 2010 Outlook Web App 没有联系人列表项，无法展开与...Lync联系人的IM消息沟通。...Exchange 2010客户端访问服务器(CAS)一共3台，排查发现用户登录OWA是第2台，手动切换到第1、3台联系人列表正常。

6621 0

JS_SDK实现网站应用QQ登录功能-QQ互联（源码版）

/qc_jssdk.js" <!...btnId:"qqLoginBtn" //插入按钮的节点id }); <script type="text/javascript" src="//connect.qq.com.../qc_jssdk.js" charset="utf-8" data-callback="true"> <script type...过滤 figureurl : reqData.figureurl })); }, function(opts){//注销成功 alert('QQ...登录注销成功'); } ); 记得下载JS SDK到根目录在文章里下载，也可以到官方网站里面下载 JS_SDK实现网站应用QQ登录功能-QQ

3.1K2 0

干货，仿qq列表，手把手实现分类悬浮提示

新来的产品提了一个需求，让应用中的一个列表按照分类显示，并且能提示当前是在哪个分类，度娘了一番，参考了前辈们的博客，实现了如下图的效果：效果图.gif 这种效果的实现这里是采用自定义ExpandableListView...，给它设置一个指示布局，在滑动过程中监听当前是否应该悬浮显示分类来实现的。...二实现代码 1.在xml中声明自定义ExpandableListView <test.com.expandablelistviewdemo.CustomExpandListview //这里不唯一...Toast.LENGTH_SHORT).show(); return true; } } ); 三总结从上边儿的步骤可以看出，使用CustomExpandListview实现图中的效果是非常容易的...，这个demo的全部代码在https://github.com/SolveBugs/ExpandableListviewDemo ，欢迎下载，主要的实现在MyAdapter和CustomExpandListview

7593 0

js下拉列表实现增加和移除选项

οnclick="add()"> //主要功能实现... //添加按钮功能实现 function add(){ //获取input文本输入狂标签 var txt = document.getElementById...txt.value; var se = document.getElementById("s1"); //把新建的option添加进来 se.add(o); } //移除按钮功能实现

2604 0

HTML中使用js实现多级列表联动-实例省级列表联动

实例查看实例 HTML中使用js实现多级列表联动-实例省级列表联动省级列表多级联动

4203 0

iOS开发中QQ好友列表下拉显示全部好友实现思路

https://blog.csdn.net/u010105969/article/details/73312801 在QQ的好友页面有一个点击各个分类，然后展示分类中所有好友的效果，今天就说一说实现该效果的一个思路...这个页面肯定是需要一个UITableView的，在tableview的代理方法中要实现分区的一个方法，即要返回tableview的分区数。返回的分区数就是好友的分类数。...- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 方法的实现很关键，1

1.7K2 0

QQ好友界面_qq怎么群发消息给好友列表

效果如下：依次为图一—图二—-图三—-图四主要实现效果：点击主标题显示下拉好友，再点击收起下拉好友；鼠标移到好友上背景颜色改变；选中的好友背景颜色也要改变；代码如下： <!...white”; } } } 注意： 1、自定义函数运用的形参； 2、为什么不用hover属性，而用onmouseover,onmouseout属性：内嵌样式在js

1.4K5 0

实现列表瀑布流布局（纯css或js定位）

这里就简单记录下这段时间常常要写的瀑布流列表纯css实现：直接上代码 .post-list{/* 列表设置,2列;列间距4*/ -webkit-column-count...单个设置*/ } } 效果：竖向排列，并且在排列中，会尽量使得两列的高度相近竖向排列.png 所以这样的实现并不能用于列表分页加载...每次加载新页面，会使得整个列表重排。。。。...js动态排序：还是用最近一直在写的uni-app写的，通过获取元素的高度进行绝对定位还是上代码（数据） data(){ return { mescroll: null, //...newUrl,10) } } else { return str } } } 代码（上一下我鸡贼的css吧），实现列表距离外边框

2.1K1 0

java 登录 qq_Java实现QQ登录

qq(HttpSession session){ //QQ互联中的回调地址 String backUrl = http + “/qq/callback”; //用于第三方应用防止CSRF攻击 String...request) throws Exception { HttpSession session = request.getSession(); //qq返回的信息：http://graph.qq.com...Access Token String backUrl = http + “/qq/callback”; String url = “https://graph.qq.com/oauth2.0/token...://graph.qq.com/user/get_user_info?..._2”,(String)jsonObject.get(“figureurl_qq_2”)); //大小为100*100像素的QQ头像URL return “redirect:/home”; } } 发布者

5.2K8 0

用js来实现那些数据结构12（散列表）

上一篇写了如何实现简单的Map结构，因为东西太少了不让上首页。好吧。。。　　这一篇文章说一下散列表hashMap的实现。那么为什么要使用hashMap？hashMap又有什么优势呢？...那么无论是array也好，object也好，栈还是队列还是列表或者集合（我们前面学过的所有数据结构）都需要遍历。不然我们根本拿不到我们想要操作的具体的元素。但是这样就有一个问题，那就是效率。...其实lose lose散列函数就是简单的把每个key中的所有字母的ASCII码值相加，生成一个数字，作为散列表的key。当然，这种方法并不是很好，会生成很多相同的散列值。...那么我们开始实现我们的hashMap： // 这里我们没在重复的去写clear，size等其他的方法，因为跟前面实在是没啥区别。...1、分离链接分离链接，其实核心就是为散列表的每一个位置创建一个链表，并将元素存储在里面。它可以说是解决冲突的最简单的方法，但是，它占用了额外的存储空间。

1K2 0

用js来实现那些数据结构12（散列表）

上一篇写了如何实现简单的Map结构，因为东西太少了不让上首页。好吧。。。　　这一篇文章说一下散列表hashMap的实现。那么为什么要使用hashMap？hashMap又有什么优势呢？...那么无论是array也好，object也好，栈还是队列还是列表或者集合（我们前面学过的所有数据结构）都需要遍历。不然我们根本拿不到我们想要操作的具体的元素。但是这样就有一个问题，那就是效率。...其实lose lose散列函数就是简单的把每个key中的所有字母的ASCII码值相加，生成一个数字，作为散列表的key。当然，这种方法并不是很好，会生成很多相同的散列值。...那么我们开始实现我们的hashMap： // 这里我们没在重复的去写clear，size等其他的方法，因为跟前面实在是没啥区别。...1、分离链接分离链接，其实核心就是为散列表的每一个位置创建一个链表，并将元素存储在里面。它可以说是解决冲突的最简单的方法，但是，它占用了额外的存储空间。

1.9K8 0

原生js实现二级联动下拉列表菜单

二级联动下拉列表菜单的难点在于对后台返回的数据进行解析，不多逼逼，直接上代码 ?...上图是后台返回的数据实现代码如下： var deviceNotExist = true;//防止数据重复 if(data.code == 0) { //查询成功 var param = data.content...][0][i].jssj + ">" + mulArr[1][0][i].kssj + "-" + mulArr[1][0][i].jssj + ""); } //选择下拉框列表内容时下面的列表实现联动...$("#device").change(function() { $("#period").html("");//改变列表值时先清空下面列表的内容 var dIndex = $("#device...option:selected").index();//获取当前选中列表的下标 for(var i = 0; i < mulArr[1][dIndex].length; i++) { $("

12.2K2 0

Java 实现 qq 登录

准备工作 1.云服务器 2.备案的域名 3.本地调试需要修改hosts文件，将域名映射到127.0.0.1 一、申请QQ互联，并成为开发者 QQ互联：https://connect.qq.com/index.html...yml配置 server: port: 80 qq: oauth: http: //QQ互联中填写的网站地址导入pom依赖 qq(HttpSession session){ //QQ互联中的回调地址 String backUrl = http +...("figureurl_qq_2",(String)jsonObject.get("figureurl_qq_2")); //大小为100*100像素的QQ头像URL return "redirect...工具类（主要用于解析QQ返回的信息） */public class QQHttpClient { //QQ互联中提供的 appid 和 appkey public static final

2.8K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭