PHP+Mysql+jQuery实现动态展示信息

　　在本站前面有文章介绍了如何实现发表微博说说：PHP+Mysql+jQuery实现发布微博程序--jQuery篇，本例将基于其数据库结构，用动态的方式展示发表的说说信息。

　　查看示例：DEMO

XHTML

复制代码代码如下:

　　<p><strong><a href="http://www.glzy8.com">Shuro</a></strong><span>

　　8分钟前</span> 说：</p>

　　</div>

　　...

　　</div>

　　上述HTML结构由N个.saylist构成，用于展示用户的评论信息，当然在本例中，将由PHP负责生成这段XHTML代码。

　　CSS

复制代码代码如下:

　　#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。

复制代码代码如下:

　　function formatSay($say,$dt,$uid){

　　$say=htmlspecialchars(stripslashes($say));

　　return'

　　<div class="saylist"><a href="#"><img src="images/'.$uid.'.jpg" width="50"

　　height="50" alt="demo" /></a>

　　<p><strong><a href="#">demo_'.$uid.'</a></strong> <span>'.tranTime($dt).'</span> 说：

　　</p><div class="say">'.$say.'</div>

　　</div>

　　</div>';

　　}

　　时间轴函数tranTime()将时间转换成如“1小时前”的格式，详情可阅读本站文章：PHP实现时间轴函数

复制代码代码如下:

　　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 < 60) {

　　$str = '刚刚';

　　}

　　elseif ($time < 60 * 60) {

　　$min = floor($time/60);

　　$str = $min.'分钟前';

　　}

　　elseif ($time < 60 * 60 * 24) {

　　$h = floor($time/(60*60));

　　$str = $h.'小时前 '.$htime;

　　if($ds==1)

　　$str = '昨天 '.$rtime;

　　}

　　elseif ($time < 60 * 60 * 24 * 2) {

　　$str = '昨天 '.$rtime;

　　if($ds==2)

　　$str = '前天 '.$rtime;

　　}elseif($time < 60 * 60 * 24 * 3){

　　$str = '前天 '.$rtime;

　　if($ds>2)

　　$str = $rtime;

　　}

　　else {

　　$str = $rtime;

　　}

　　return $str;

　　}

　　然后在index.php中调用funciton.php，并连接MySQL数据库输出评论列表。

复制代码代码如下:

　　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中输出评论列表。

复制代码代码如下:

　　<?php echo $sayList;?>

　　</div>

　　这样一来，运行index.php会出现一个列表，我们只需要一条一条展示，下面就需要jQuery来办了。

　　jQuery

复制代码代码如下:

　　$(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();

　　});

　　})();

　　});

教程首页更多教程