时时商务社区

标题: PHP+Mysql+jQuery实现动态展示信息 [打印本页]

作者: qz234 时间: 2018-2-14 08:32

在本站前面有文章介绍了如何实现发表微博说说：PHP+Mysql+jQuery实现发布微博程序--jQuery篇，本例将基于其数据库结构，用动态的方式展示发表的说说信息。
查看示例：DEMO
XHTML
[U]复制代码[/U] 代码如下:

Shuro
8分钟前说：

评论内容。。。

...

上述HTML结构由N个.saylist构成，用于展示用户的评论信息，当然在本例中，将由PHP负责生成这段XHTML代码。
CSS
[U]复制代码[/U] 代码如下:
#demo{width:400px; height:80px; margin:80px auto; border-bottom:1px dotted #d3d3d3}
.saylist{margin:8px auto; height:80px; padding:4px 0;}
.saylist img{float:left; width:50px; margin:4px}
.saytxt{float:right; width:320px; overflow:hidden}
.saytxt p{line-height:18px}
.saytxt p strong{margin-right:6px}
.saytxt p span{color:#999}
.say{margin-top:3px; font-size:14px; font-weight:bold}

使用上述CSS渲染HTML外观，当然你也可以自己定制你喜欢的外观样式。
PHP
在function.php中有两个函数，formatSay()用来输出用户评论列表，即输出上文中的HTML。
[U]复制代码[/U] 代码如下:
function formatSay($say,$dt,$uid){
$say=htmlspecialchars(stripslashes($say));
return'

demo_'.$uid.' '.tranTime($dt).' 说：
'.$say.'

';
}

时间轴函数tranTime()将时间转换成如“1小时前”的格式，详情可阅读本站文章：PHP实现时间轴函数
[U]复制代码[/U] 代码如下:
function tranTime($stime) {
$rtime = date("m-d H:i",$stime);
$htime = date("H:i",$stime);
$day_time = date("j",$stime);
$today=date("j",time());
$ds = $today - $day_time;
$time = time() - $stime;
if ($time 2)
$str = $rtime;
}
else {
$str = $rtime;
}
return $str;
}

然后在index.php中调用funciton.php，并连接MySQL数据库输出评论列表。
[U]复制代码[/U] 代码如下:
require_once('connect.php'); //连接数据库文件
require_once('function.php'); //函数文件
$query=mysql_query("select * from say order by id desc limit 0,15");
while ($row=mysql_fetch_array($query)) {
$sayList.=formatSay($row[content],$row[addtime],$row[userid]);
}

在div#demo中输出评论列表。
[U]复制代码[/U] 代码如下:

这样一来，运行index.php会出现一个列表，我们只需要一条一条展示，下面就需要jQuery来办了。
jQuery
[U]复制代码[/U] 代码如下:
$(function(){
//除了显示第一个saylist,其他的都隐藏
$(".saylist").hide().eq(0).show();
//自循环函数，循环展示信息
(function showNextSay(){
//每条信息展示7.5秒
$(".saylist:visible").delay(7500).fadeOut("slow",function(){
$(this).appendTo("#demo");
//展示下一条
$(".saylist:first").fadeIn("slow",function(){
//再次调用函数
showNextSay();
});
});
})();
});

您可能感兴趣的文章:

PHP+Mysql+jQuery实现发布微博程序 jQuery篇

jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)

PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别

基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码

jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

如何解决PHP使用mysql_query查询超大结果集超内存问题

欢迎光临时时商务社区 (http://bbs.4435.cn/)