PHP--仿微信, 通过登陆者用户名显示好友列表,显示头像和昵称
<!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;$i<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--仿微信, 通过登陆者用户名显示好友列表,显示头像和昵称的更多相关文章
- 【转】android 欢迎界面翻页成效，仿微信第一次登陆介绍翻页界面
android 欢迎界面翻页效果,仿微信第一次登陆介绍翻页界面 本实例做的相对比较简单主要是对翻页控件的使用,有时候想要做一些功能是主要是先了解下是否有现成的控件可以使用,做起来比较简单不用费太大的劲 ...
- uniapp+nvue实现仿微信App聊天应用 —— 成功实现好友聊天+语音视频通话功能
基于uniapp + nvue实现的uniapp仿微信App聊天应用 txim 实例项目,实现了以下功能. 1: 聊天会话管理 2: 好友列表 3: 文字.语音.视频.表情.位置等聊天消息收发 4: ...
- XMPP通讯开发-仿QQ显示好友列表和用户组
在 XMPP通讯开发-服务器好友获取以及监听状态变化 中我们获取服务器上的用户好友信息,然后结合XMPP通讯开发-好友获取界面设计 我们将两个合并起来,首先获取用户组,然后把用户组用List ...
- react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
一.前言 9月,又到开学的季节.为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN ...
- 37.qt quick- 高仿微信实现局域网聊天V3版本(添加登录界面、UDP校验登录、皮肤更换、3D旋转)
1.版本介绍(已上传至群里) 版本说明: 添加登录界面. UDP校验登录. 皮肤更换. 3D旋转(主界面和登录界面之间切换) . 效果图如下所示: 如果效果图加载失败,可以去哔哩哔哩 https:// ...
- Android编程之仿微信显示更多文字的View
微信朋友圈中,如果好友发表的文字过长,会自动收缩起来,底下有提示,当点击“显示更多”时才会展开. 首先定义布局文件(很简单,不解释): <?xml version="1.0" ...
- iOS 即时通讯 + 仿微信聊天框架 + 源码
这些你造吗? 即时通讯(IM),在IOS这片江湖里面已经算是一个老者了,我这小旋风也是在很早以前巡山的时候,就知道有即时通讯这个妖怪,以前也多多少少接触过一些,在造APP的时候用过,哎呀,说着说着就感 ...
- iOS开发-仿微信图片分享界面实现
分享功能目前几乎已成为很多app的标配了,其中微信,微博等app的图片分享界面设计的很棒,不仅能够展示缩略图,还可以预览删除.最近我在做一款社交分享app,其中就要实现图文分享功能,于是试着自行实现仿 ...
- php 实现微信模拟登陆、获取用户列表及群发消息功能示例
本文实例讲述了php实现微信模拟登陆.获取用户列表及群发消息功能.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...
随机推荐
- SYN2306B型 GPS北斗双模授时板
SYN2306B型 GPS北斗双模授时板 产品概述 SYN2306B型GPS北斗双模授时板是由西安同步电子科技有限公司精心设计.自行研发生产的一款双模授时板卡,接收北斗或者GPS北斗混合授时卫星信号, ...
- ZooKeeper学习第五期--ZooKeeper管理分布式环境中的数据（转）
转载来源:https://www.cnblogs.com/sunddenly/p/4092654.html 引言 本节本来是要介绍ZooKeeper的实现原理,但是ZooKeeper的原理比较复杂,它 ...
- java集合的方法及使用详解
一.java集合的分类及相互之间的关系 Collection接口:向下提供了List和Set两个子接口 |------List接口:存储有序的,存储元素可以重复 |------ArrayList(主要 ...
- java中静态类与普通类之间区别
所谓静态,指以static关键字修饰的,包括类,方法,块,字段. 非静态,指没有用static 修饰的. 一.静态类的特点 1.全局唯一,任何一次的修改都是全局性的影响 2.只加载一次,优先于非静态 ...
- Hexo+NexT（一）：在Windows下安装Hexo+NexT及搭建博客
阅读本篇之前,假定读者已经有了Node.js的基础,如需要补充Node.js知识的,请自行百度. Hexo是在Node.js框架下的一个项目,利用Node.js提供的强大功能,完成从Markdown到 ...
- 【粗略版】Linux deploy手机上创建自己的服务器
偶尔看见了一篇安卓手机z安装linux的文章,正好自己有一个旧手机,心里有个大胆的想法. 简单来说,就是把旧手机安装linux然后装上容器,尝试部署一个简单项目,下面会记录下过程: 首先了解下这个软件 ...
- php抽奖概率程序
抽奖概率思想: 1.给每一个奖项设置要给概率数,如下面所有奖品综合设置为100,iphone5s是5,也就是5% 2.然后通过php生成随机数函数生成一个在总概率之间的随机数 如:抽第一个奖品5s的时 ...
- Nagios安装配置教程（一）基本了解
一.Nagios简介 Nagios是一款开源的电脑系统和网络监视工具,能有效监控Windows.Linux和Unix的主机状态, 交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信 ...
- 设计模式-桥接模式（Bridge）
桥接模式是构造型模式之一.把抽象(Abstraction)与行为实现(Implementor)分离开来,从而可以保持各部分的独立性以及应对它们的功能扩展. 角色和职责: 1.抽象类(Abstracti ...
- Codeforces 755A：PolandBall and Hypothesis（暴力）
http://codeforces.com/problemset/problem/755/A 题意:给出一个n,让你找一个m使得n*m+1不是素数. 思路:暴力枚举m判断即可. #include &l ...