写个简单 类似webqq的 小功能 （一）
什么都是从易到难，在洋哥的指导下，我开始以写简单的功能来学习js。由于是初学者，我写的这个是一个功能一个功能块的添加，同时也是为了给自己一个总结。。。
第一步：还是做好准备工作，架好html结构。实现2个功能：1.点击好友列表组 产生展开、闭合 交替的效果 2.隐藏 退出功能
html结构（结构）
View Code
<!
DOCTYPE HTML
>
<
html
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
<
title
>
qq面板
</
title
>
</
head
>
<
body
>
<
div
class
="wrap"
>
<
div
class
="box"
id
="pagebox"
>
<
div
class
="box-tt"
>
<
h4
>
小QQ
</
h4
>
<
div
class
="tt-btn"
><
a
href
="javascript:void(0)"
id
="a1"
>
最小化
</
a
><
a
href
="javascript:void(0)"
id
="a2"
>
关闭
</
a
></
div
>
</
div
>
<!--
box-tt end
-->
<
dl
class
="con"
id
="con"
>
<
dt
><
span
></
span
>
在线好友
</
dt
>
<
dd
>
<
ul
>
<
li
><
img
src
="style/inor/1.bmp"
/>
无语
</
li
>
<
li
><
img
src
="style/inor/6.bmp"
/>
江湖
</
li
>
<
li
><
img
src
="style/inor/3.jpg"
/>
西楼
</
li
>
<
li
><
img
src
="style/inor/4.bmp"
/>
漠雪寒霜
</
li
>
<
li
><
img
src
="style/inor/5.bmp"
/>
千代
</
li
>
</
ul
>
</
dd
>
<
dt
><
span
></
span
>
我的好友
</
dt
>
<
dd
>
<
ul
>
<
li
><
img
src
="style/inor/7.jpg"
/>
晴儿
</
li
>
<
li
><
img
src
="style/inor/8.bmp"
/>
随心依然
</
li
>
<
li
><
img
src
="style/inor/9.jpg"
/>
深谷幽兰
<
</li
>
<
li
><
img
src
="style/inor/10.bmp"
/>
迪哥
</
li
>
<
li
><
img
src
="style/inor/11.bmp"
/>
阿娇
</
li
>
</
ul
>
</
dd
>
<
dt
><
span
></
span
>
宿舍好友
</
dt
>
<
dd
>
<
ul
>
<
li
><
img
src
="style/inor/14.bmp"
/>
艳儿
</
li
>
<
li
><
img
src
="style/inor/13.bmp"
/>
晶晶
</
li
>
<
li
><
img
src
="style/inor/9.jpg"
/>
小小
</
li
>
<
li
><
img
src
="style/inor/17.bmp"
/>
琳琳
</
li
>
<
li
><
img
src
="style/inor/15.bmp"
/>
小五
</
li
>
</
ul
>
</
dd
>
<
dt
><
span
></
span
>
大学好友
</
dt
>
<
dd
>
<
ul
>
<
li
><
img
src
="style/inor/18.bmp"
/>
烟雨朦胧
</
li
>
<
li
><
img
src
="style/inor/21.bmp"
/>
柳絮飞飞
</
li
>
<
li
><
img
src
="style/inor/2.bmp"
/>
灰色头像
</
li
>
<
li
><
img
src
="style/inor/5.bmp"
/>
喜雨
</
li
>
<
li
><
img
src
="style/inor/17.bmp"
/>
佳静
</
li
>
</
ul
>
</
dd
>
<
dt
><
span
></
span
>
高中好友
</
dt
>
<
dd
>
<
ul
>
<
li
><
img
src
="style/inor/16.bmp"
/>
梦无语
</
li
>
<
li
><
img
src
="style/inor/17.bmp"
/>
天路
</
li
>
<
li
><
img
src
="style/inor/7.jpg"
/>
莫失莫忘
</
li
>
<
li
><
img
src
="style/inor/19.bmp"
/>
幸运星
</
li
>
<
li
><
img
src
="style/inor/20.bmp"
/>
四叶草
</
li
>
</
ul
>
</
dd
>
</
dl
>
</
div
>
</
div
>
</
body
>
</
html
>
View Code
body
{
margin
:
0 auto
;
padding
:
0
;
font-size
:
14px
;
line-height
:
22px
;
text-align
:
center
;
background
:
#f9fbf9
;
font-size
:
12px
;
}
div,form,ul,ol,li,span,dl,dt,dd
{
margin
:
0
;
padding
:
0
;
border
:
0
;
text-align
:
left
;
}
img,a img,p
{
border
:
0
;
margin
:
0
;
padding
:
0
;
}
h1,h2,h3,h4
{
margin
:
0
;
padding
:
0
;
}
ul,ol,li
{
list-style
:
none
;
text-align
:
left
;
}
input
{
font-size
:
12px
;
}
img
{
vertical-align
:
middle
;
}
a
{
outline-style
:
none
;
color
:
#0c6496
;
text-decoration
:
none
;
}
.hide
{
display
:
none
;
}
.left
{
float
:
left
;
}
.right
{
float
:
right
;
}
.clear
{
clear
:
both
;
font-size
:
1px
;
width
:
1px
;
visibility
:
hidden
;
height
:
0
;
line-height
:
0
}
.warp
{
width
:
1800px
;
height
:
850px
;
margin
:
0 auto
;
}
.box
{
width
:
340px
;
height
:
540px
;
margin
:
20px 0 0 10px
;
color
:
#333333
;
background
:
#efefef
;
border-radius
:
5px
;
overflow-y
:
scroll
;
}
.box-tt
{
height
:
26px
;
padding
:
5px 15px
;
}
.box-tt h4
{
float
:
left
;
width
:
200px
;
}
.tt-btn
{
float
:
right
;
width
:
60px
;
padding-top
:
5px
;
}
.tt-btn a
{
float
:
left
;
width
:
22px
;
height
:
22px
;
margin
:
0 4px
;
text-indent
:
-9999px
;
background
:
url(../style/sprite.png) no-repeat
;
}
#a1, .tt-btn .a3
{
background-position
:
-63px -23px
;
cursor
:
pointer
;
}
#a2, .tt-btn .a4
{
background-position
:
-123px -23px
;
cursor
:
pointer
;
}
.con
{
padding
:
0 12px
;
}
.con dt
{
height
:
28px
;
line-height
:
28px
;
cursor
:
pointer
;
}
.con dt span
{
padding
:
0px 5px
;
background
:
url(../style/eqq_sprite.gif) no-repeat -18px -17px
;
}
.con .dtclick span
{
padding
:
0px 5px
;
background
:
url(../style/eqq_sprite.gif) no-repeat 0px -17px
;
}
.con dd
{
display
:
none
;
}
.con dd li
{
display
:
block
;
height
:
45px
;
margin-bottom
:
2px
;
padding
:
5px 0 0 10px
;
overflow
:
hidden
;
cursor
:
pointer
;
}
.con dd li img
{
float
:
left
;
margin-right
:
7px
;
border-radius
:
6px
;
}
.con dd li:hover
{
background
:
#CBE7FC
;
}
第一个 展开 闭合交替的功能
View Code
function
onclickEvent() {
var
mtt
=
$(
"
con
"
).getElementsByTagName(
"
dt
"
);
var
mcon
=
$(
"
con
"
).getElementsByTagName(
"
dd
"
);
var
mttLength
=
mtt.length;
//
点击好友 展开收起的效果
for
(
var
i
=
0
; i
<
mttLength; i
++
) {
//
这如果用 mtt[i].onclick =function(){。。。} 会报错undefined 。实际上这是个闭包问题，在js中 在for循环中，会把最后遍历的值传给 mtt[i],所以为了解决闭包问题 我在此用了匿名函数的方法，具体原理还不太懂，我只知道这么用。
(
function
() {
var
temp
=
i;
mtt[temp].onclick
=
function
() {
mtt[temp].className
=
(mtt[temp].className
==
"
dtclick
"
)
?
""
:
"
dtclick
"
;
//
点击 背景小箭头的变化
showView(mcon[temp]);
}
})();
}
}
2.隐藏功能就是把display设置none；关闭功能 就是删除对象，我把隐藏对象，显示对象，删除对象 分别封装在函数里以便重用
window.onload
=
function
() {
var
small
=
document.getElementById(
"
a1
"
);
var
closed
=
document.getElementById(
"
a2
"
);
var
box
=
document.getElementById(
"
pagebox
"
);
//
隐藏窗口
small.onclick
=
function
() {
displayNone(box);
};
//
关闭窗口
closed.onclick
=
function
() {
if
(confirm(
"
are you sure exit?
"
)) {
removeEle(box);
}
else
{
return
false
;
}
};
onclickEvent();
//
这里是调用 点击闭合展开交替的函数
}
//
隐藏对象
function
displayNone(obj) {
obj.style.display
=
"
none
"
;
}
//
显示对象
function
displayBlock(obj) {
obj.style.display
=
"
block
"
;
}
//
删除对象
function
removeEle(removeObj) {
removeObj.parentNode.removeChild(removeObj);
}
（未完待续）