写个简单 类似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);
}
（未完待续）
浙公网安备 33010602011771号