码迷,mamicode.com
首页 > 微信 > 详细

PHP--仿微信, 通过登陆者用户名显示好友列表,显示头像和昵称

时间:2016-04-04 19:27:06      阅读:330      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*
{
    margin:0px auto; 
    padding:0px; 
    font-family:"微软雅黑";    
}
#list
{
    width:350px;
    height:400px;
    background-color:#999;
        
}
.py
{
    width:350px; height:40px;    
    margin:8px 0px 0px 0px;
}
.py:hover
{
    background-color:#3F0;
    color:#FFF;
    cursor:pointer;
}
.img
{
    width:35px; height:40px; float:left;
}
.nc
{
    float:left; height:40px;
    margin:0px 0px 0px 20px;
    line-height:40px;
    vertical-align:middle;
}
</style>

</head>

<body>
<?php
    $uid = "15053397521";  //因为没有从登陆页面传过来,所以先给uid传一个值
?>

<div id="list">
    <?php
    //造链接对象
    $db =new MySQLi("localhost","root","517","weixin");
    //判断是否出错
    !mysqli_connect_error() or die("连接失败");
    //写sql语句
    $sql = "select Friends from friends where Uid=‘{$uid}‘";
    //执行sql语句
    $result = $db->query($sql);
    
    $attr = $result->fetch_all();
    
    for($i=0;count($attr);$i++)
    {
        //查出朋友的用户名,因为二维数组的结果就一个值,所以索引取0.
        $fuid = $attr[$i][0];
        //查users表,根据朋友的UID查出朋友的昵称和头像
        $sqlf = "select Pic,NickName from Users where Uid=‘{$fuid}‘";
        $resultf = $db->query($sqlf);
        
        $attrf = $resultf->fetch_row();//因为是根据朋友的uid查询的,所以查出的只能是一条数据,所以最好用fetch_row()方便些
        
        //在外层div里加一个bs自定义属性,方便后期加功能,想选中某一个DIV的时候,存上他的用户名,以后方便以后取出
        echo"<div onclick=‘ShowCode(this)‘ class=‘py‘ bs=‘{fuid}‘>
        <img class=‘img‘ src=‘{$attrf[0]}‘ />
        <div class=‘nc‘>{$attrf[1]}</div>
        </div>";
        
        
    }
    
?>
</div>
<!--用js的方式更改样式-->
<script type="text/javascript">
 function ShowCode(div)
 {
     //让div在被选中之前,先把之前所有div的样式先清除掉
         var a = document.getElementsByClassName("py"); //查出来的a是一个集合,js里的集合和PHP里的数组是一样的道理
        //利用for循环把所有div的样式清除
        for(var i=0;i<d.length;i++)
        {
            //alert(d[i]);         //可以alert试试,看下输出的是什么.如果输出的是divelement,就说明找到了每一个DIV了.d[i]就可以代表div了.
            d[i].style.backgroundcolor = "#FFF";
            d[i].style.color = "#000";
        }
        //清除之后再给选中的div加上指定的样式
       div.style.backgroundcolor = "#3F0";   //修改样式的时候,背景色backgroundcolor中间没有横杠链接的
       div.style.Color = "#FFF";                //修改字体颜色
       
       //每点击一个div让它显示输出谁的用户名
       alert(div.getAttribute("bs"));   //把用户名存在自定义属性bs里了,所以可以通过这个方法获取属性
     
 }
</script>
</body>
</html>

*

{
margin:0px auto; 0px表示去掉元素自带的边距 auto设置后,div就可以自动居中
padding:0px; 去掉默认的内边距
}
一般做页面之前都会写上以上代码,方便布局

 

小节:
1).任何标签里都是可以自己写属性的,名字和值可以自己定义.用js取值, 把属性放在getattribute();里
就可以取到值。

2).给外层div定义一个bs属性,里面的值是朋友的uid.点击div的时候,就知道点击的是哪个了。

3).HTML里面不允许ID重复,所以for循环里用的都是class,class可以重复。如果想用ID,要加上标识,
让每一个ID不一样。

4).float:代表流.

5).margin:0px 0px 0px 20px; margin控制的方向顺序是:上右下左(顺时针方向)

6).在css样式表里调字体垂直对齐:
  line-height:40px; (行高)
  vertical-align:middle; (把字在行高里对齐)

7).根据以上代码,让鼠标放在外层DIV上面,样式出现改变
  .py:hover
  {
  background-color:#3F0;
  color:#FFF;
  cursor:pointer; //表示鼠标放在上面变成小手
  }

8).点击某一个div,让div背景变成另一个颜色,鼠标挪出后颜色不变、再取出选中值
  方法:使用onclick点击事件
  点击之后会执行相应的函数,函数里面的this是一个参数,调用函数的时候传给它一个参数,this参数写
  在哪里,就代表谁。
以上代码中onclick事件写在了div里,这里的参数this就代表这个div.写function函数的时候,里面的
参数名字可以自己定义!!

9).样式是有优先级的!
  js代码的样式加在了元素里面,而hover是在css样式表里的。一个内联样式一个内嵌样式,!写在元素里
  面的样式优先级最高,可以覆盖hover里的,写在hover里的,比外部的样式表优先级要高!

10).因为function里的参数是传进去的,所以属性不能直接点出来,需要自己手写.如果是document出来的
可以只能点击出来

 

 

PHP--仿微信, 通过登陆者用户名显示好友列表,显示头像和昵称

标签:

原文地址:http://www.cnblogs.com/supermeimei/p/5352483.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!