java 仿qq mysql_php+js+mysql设计的仿webQQ-<5>IM窗体的实现

<8>IM窗体的实现

IM窗体的效果图

PHP+HTML代码

WebChat

//自己的信息

.jpg"/>

$allfriendsql="select count(*) as sum from friend where myself='".$email."'"; $allfriendresult=mysql_query($allfriendsql); $allfriendrow=mysql_fetch_array($allfriendresult); $onlinesql="select count(*) as online from friend,user where friend.myfriend=user.email and myself='".$email."' and state='在线'"; $onlineresult=mysql_query($onlinesql); $onlinerow=mysql_fetch_array($onlineresult); ?> 我的好友[<?php echo $onlinerow["online"]."/".$allfriendrow["sum"]; ?>]

//好友列表

$friendSQL="select friend.*,user.* from friend,user where friend.myfriend=user.email and myself='".$email."' order by state";

$friendResult=mysql_query($friendSQL);

while($friendRow=mysql_fetch_array($friendResult))

{

echo "

onDblclick='createDialogDiv(this)'>";

echo "

echo "

";

echo "";

echo "

";

echo "

".$friendRow["myfriend"]."";

echo "

";

echo "

";

echo "

".$friendRow["nickname"]."[".$friendRow["state"]."]";

echo "

";

echo "

";

echo "

删除";

echo "

";

echo "

";

}

?>

注意这只是部分代码，中间有数据库操作语句，但没有数据库连接语句，大家能看懂就行了，还有CSS大家可以自己写，因为每个人得审美不同！

<9>IM窗体中的js效果——点击实现层的隐藏和显示

Js代码

function change1(){

var img;

img=document.getElementById("img");

img.src="chat/down.png";

img.title="展开";

img.οnclick=change2;

document.getElementById("friendinfo").style.display="none";

}

function change2(){

var img;

img=document.getElementById("img");

img.src="chat/up.png";

img.title="收起";

img.οnclick=change1;

document.getElementById("friendinfo").style.display="";

}

<10>IM窗体中的js效果——当鼠标在层上时层的颜色改变以及层上字体颜色的改变

Js代码

function changeDivBgcolor(i,obj)

{

if(i==1)

{

document.getElementById(obj.id).style.background="#FFFF66";

document.getElementById(obj.id).style.color="black";

}

else

{

document.getElementById(obj.id).style.background="#333333";

document.getElementById(obj.id).style.color="white";

}

}

欢迎大家拍砖！(未完待续)