初学js之qq聊天展开实例
<body>
<div class="box">
<div class="lists" id="qq">
<div id="div1">
<span class="normal"></span>
<h2>我的好友</h2>
</div>
<ul>
<li>张三</li>
<li>张三</li>
<li>李三</li>
<li>李三</li>
</ul>
<div id="div2">
<span class="normal"></span>
<h2>企业好友</h2>
</div>
<ul>
<li>李四</li>
<li>李四</li>
<li>李四</li>
</ul>
<div id="div3">
<span class="normal"></span>
<h2>黑名单</h2>
</div>
<ul>
<li>王五</li>
<li>王五</li>
</ul> </div>
</div>
</body>
<style>
*{
margin:0;
padding: 0;
}
body{
background: #000;
list-style: none;
}
.box{
width: 255px;
height: 330px;
background-color: #fff;
margin: 155px auto;
position: relative;
}
.box .lists{
border: 1px solid #000;
margin: 5px 8px 0 8px;
width: 239px;
position: absolute;
}
.lists div{
background-color: #00ffff;
cursor: pointer;
}
.lists span.normal{
display:inline-block;
width: 0;
height: 0;
border: 5px solid transparent; /*设置边框无色*/
border-left-color: #333;
margin-left: 2px;
line-height: 40px;
}
.lists span.active{
display:inline-block;
width: 0;
height: 0;
border: 5px solid transparent; /*设置边框无色*/
border-top-color: #333;
margin-left: 2px;
line-height: 40px;
}
.lists h2{
display: inline-block;
font:500 20px/40px "宋体";
cursor: pointer;
}
.lists ul{
/* background-color: #00ffff; */
display: none;
}
.lists ul li{
border-bottom: 1px solid #000;
border-top:none;
}
</style>
<script>
window.onload = function(){
var oQQ = document.getElementById('qq');
var aDiv = oQQ.getElementsByTagName('div');
var aUl = document.getElementsByTagName('ul');
var aLi = document.getElementsByTagName('li');
// console.log(aLi);
var aSpan = oQQ.getElementsByTagName('span');
var aH2 = oQQ.getElementsByTagName('h2'); for(var i = 0;i< aDiv.length;i++){
aDiv[i].index = i;
aDiv[i].onOff = true;
aDiv[i].onclick = function(){
if(this.onOff){
for(var j = 0;j<aUl.length;j++){
aSpan[j].className = 'normal';
aUl[j].style.display = 'none';
aDiv[j].style.background = '#00ffff';
aDiv[j].onOff =true;
}
aUl[this.index].style.display = 'block';
aDiv[this.index].style.background = 'yellow';
aSpan[this.index].className = 'active';
aDiv[this.index].onOff = false;
}else{
aUl[this.index].style.display = 'none';
aDiv[this.index].style.background = '#00ffff';
aSpan[this.index].className = 'normal';
aDiv[this.index].onOff = true;
}
}
}
for (var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onclick = function () {
aLi[this.index].style.background = 'red';
for (var j = 0; j < aLi.length; j++) {
aLi[j].style.background = '';
}
aLi[this.index].style.background = 'red';
} } }
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
body{
background: #000;
list-style: none;
}
.box{
width: 255px;
height: 330px;
background-color: #fff;
margin: 155px auto;
position: relative;
}
.box .lists{
border: 1px solid #000;
margin: 5px 8px 0 8px;
width: 239px;
position: absolute;
}
.lists div{
background-color: #00ffff;
cursor: pointer;
}
.lists span.normal{
display:inline-block;
width: 0;
height: 0;
border: 5px solid transparent; /*设置边框无色*/
border-left-color: #333;
margin-left: 2px;
line-height: 40px;
}
.lists span.active{
display:inline-block;
width: 0;
height: 0;
border: 5px solid transparent; /*设置边框无色*/
border-top-color: #333;
margin-left: 2px;
line-height: 40px;
}
.lists h2{
display: inline-block;
font:500 20px/40px "宋体";
cursor: pointer;
}
.lists ul{
/* background-color: #00ffff; */
display: none;
}
.lists ul li{
border-bottom: 1px solid #000;
border-top:none;
}
</style>
<script>
window.onload = function(){
var oQQ = document.getElementById('qq');
var aDiv = oQQ.getElementsByTagName('div');
var aUl = document.getElementsByTagName('ul');
var aLi = document.getElementsByTagName('li');
// console.log(aLi);
var aSpan = oQQ.getElementsByTagName('span');
var aH2 = oQQ.getElementsByTagName('h2'); for(var i = 0;i< aDiv.length;i++){
aDiv[i].index = i;
aDiv[i].onOff = true;
aDiv[i].onclick = function(){
if(this.onOff){
for(var j = 0;j<aUl.length;j++){
aSpan[j].className = 'normal';
aUl[j].style.display = 'none';
aDiv[j].style.background = '#00ffff';
aDiv[j].onOff =true;
}
aUl[this.index].style.display = 'block';
aDiv[this.index].style.background = 'yellow';
aSpan[this.index].className = 'active';
aDiv[this.index].onOff = false;
}else{
aUl[this.index].style.display = 'none';
aDiv[this.index].style.background = '#00ffff';
aSpan[this.index].className = 'normal';
aDiv[this.index].onOff = true;
}
}
}
for (var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onclick = function () {
aLi[this.index].style.background = 'red';
for (var j = 0; j < aLi.length; j++) {
aLi[j].style.background = '';
}
aLi[this.index].style.background = 'red';
} } }
</script>
</head>
<body>
<div class="box">
<div class="lists" id="qq">
<div id="div1">
<span class="normal"></span>
<h2>我的好友</h2>
</div>
<ul>
<li>张三</li>
<li>张三</li>
<li>李三</li>
<li>李三</li>
</ul>
<div id="div2">
<span class="normal"></span>
<h2>企业好友</h2>
</div>
<ul>
<li>李四</li>
<li>李四</li>
<li>李四</li>
</ul>
<div id="div3">
<span class="normal"></span>
<h2>黑名单</h2>
</div>
<ul>
<li>王五</li>
<li>王五</li>
</ul> </div>
</div>
</body>
</html>
初学js之qq聊天展开实例的更多相关文章
- 初学js之qq聊天实例
实现的功能为上图所示,但是每新发送的消息必须显示在最上面. 我实现了两版,样式有是一样的.我们直接看代码. 版本一: <!DOCTYPE html> <html lang=" ...
- Js打开QQ聊天对话窗口
function openQQ() { var qq = $(this).attr('data-qq');//获取qq号 window.open('http://wpa.qq.com/msgrd?v= ...
- JS简单仿QQ聊天工具的制作
刚接触JS,对其充满了好奇,利用刚学到的一点知识,写了一个简单的仿QQ聊天的东西,其中还有很多的不足之处,有待慢慢提高. 功能:1.在输入框中输入内容,点击发送,即可在上方显示所输入内容. 2.点击‘ ...
- 搭建QQ聊天通信的程序：（1）基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 （1）
搭建QQ聊天通信的程序:(1)基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 原文地址(英文):http://www.networkcomms.net/creating ...
- Socket实现仿QQ聊天（可部署于广域网）附源码（1）-简介
1.前言 本次实现的这个聊天工具是我去年c#程序设计课程所写的Socket仿QQ聊天,由于当时候没有自己的服务器,只能在机房局域网内进行测试,最近在腾讯云上买了一台云主机(本人学生党,腾讯云有个学生专 ...
- QQ聊天气泡（图片拉伸不变样）、内容尺寸定制（高度随字数、字体而变）
- (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; /** QQ聊 ...
- JS获得QQ号码的昵称,头像,生日
这篇文章主要介绍了JS获得QQ号码的昵称,头像,生日的简单实例,有需要的朋友可以参考一下 http://r.qzone.qq.com/cgi-bin/user/cgi_personal_card?ui ...
- QQ 聊天机器人小薇 2.1.0 发布！
本次发布加入了支持茉莉机器人,并且更容易搭建开发环境,在线显示登录二维码~ 简介 XiaoV(小薇)是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动: 监听多个 QQ 群消息 ...
- winform实现QQ聊天气泡200行代码
c# winform实现QQ聊天气泡界面,原理非常简单,通过webKitBrowser(第三方浏览器控件,因为自带的兼容性差)加载html代码实现,聊天界面是一个纯HTML的代码,与QQ的聊天界面可以 ...
随机推荐
- DevOps的工程化
孙敬云 --Worktile高级系统架构师,WTC成员 1.研发的困境 互联网的环境 互联网这个环境比较特别,包括现在不只是互联网,就算是被互联网赋能的这些“互联网+”的企业也在改变,用户在发生变化, ...
- android 开发-HttpClient状态码定义
TP 定义的状态代码的值(.net HttpWebResponse.HttpStatusCode 成员名称 说明 Continue 等效于 HTTP 状态 100.Continue 指示客户端可能继续 ...
- H5移动端原生长按事件
// 函数名longpress// 参数为: 需长按元素的id.长按之后处理函数func function longPress(id, func,timeout=500) { var timeOutE ...
- vue-cli之脚手架
一.创建VUE项目 npm install vue-cli -g vue init webpack myprject cd myproject npm run dev 补充: 组件:它是可扩展的htm ...
- JavaScript初始
一.JavaScript基础 1.引入方式 <!--1 直接编写--> <script> alert('hello yuan') </script> <!-- ...
- 【来龙去脉系列】QRCode二维码的生成细节和原理
二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型:比如:字符,数字, ...
- 不该被忽视的CoreJava细节(一)
一.系列文章导言 <不该被忽视的CoreJava细节>系列文章将会持续更新.我希望自己通过这一系列文章的写作,能与读者一起进步,逐步完善对Java体系结构的了解. 二.本期关注点 几乎翻看 ...
- Linux I/O调度
一) I/O调度程序的总结 1) 当向设备写入数据块或是从设备读出数据块时,请求都被安置在一个队列中等待完成. 2) 每个块设备都有它自己的队列. 3) I/O调度程序负责维护这些队列的顺 ...
- vuejs属性绑定和双向绑定
属性绑定 html <div v-bind:title="title">hello world</div> js new Vue({ el:'#root', ...
- codeforces 1114C
题目连接 : https://codeforces.com/contest/1114/problem/C 题目大意:给一个整数n(1e18>=n>=0),和一个整数k(1e12>=k ...