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

查看示例：DEMO

 
 
 
 
Shuro 
8分钟前 说：
 
评论内容。。。 
 
 
... 
 
 
上述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()用来
输出用户评论列表，即

function formatSay($say,$dt,$uid){ 
$say=htmlspecialchars(stripslashes($say)); 
return' 
height="50" alt="demo" /> 
 
demo_'.$uid.' '.tranTime($dt).' 说： 
'.$say.' 
 
 
'; 
} 
 
时间轴函数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中
输出评论列表。 
 代码如下:

 
 
 
 
这样一来，运行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(); 
}); 
}); 
})(); 
});