服务器之家

服务器之家 > 正文

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

时间:2019-12-14 11:51     来源/作者:PHP教程网

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

查看示例:DEMO

XHTML 

  1. <div id="demo">  

  2. <div class="saylist">  

  3. <a href="#"><img src="images/0.jpg" width="50" height="50" alt="demo" /></a>  

  4. <div class="saytxt">  

  5. <p><strong><a href="//www.zzvips.com">Shuro</a></strong><span>  

  6. 8分钟前</span> 说:</p>  

  7. <div class="say">评论内容。。。</div>  

  8. </div>  

  9. </div>  

  10. ...  

  11. </div>  

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

  1. #demo{width:400px; height:80px; margin:80px auto; border-bottom:1px dotted #d3d3d3}  

  2. .saylist{margin:8px auto; height:80px; padding:4px 0;}  

  3. .saylist img{float:left; width:50px; margin:4px}  

  4. .saytxt{float:right; width:320px; overflow:hidden}  

  5. .saytxt p{line-height:18px}  

  6. .saytxt p strong{margin-right:6px}  

  7. .saytxt p span{color:#999}  

  8. .say{margin-top:3px; font-size:14px; font-weight:bold}  

使用上述CSS渲染HTML外观,当然你也可以自己定制你喜欢的外观样式。 
PHP 
在function.php中有两个函数,formatSay()用来输出用户评论列表,即输出上文中的HTML。 

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

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

  3. return'  

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

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

  6. <div class="saytxt">  

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

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

  9. </div>  

  10. <div class="clear"></div>  

  11. </div>';  

  12. }  


时间轴函数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中输出评论列表。 

复制代码代码如下:


<div id="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(); 
}); 
}); 
})(); 
}); 

相关文章

热门资讯

玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分 2019-06-21
男生常说24816是什么意思?女生说13579是什么意思?
男生常说24816是什么意思?女生说13579是什么意思? 2019-09-17
配置IIS网站web服务器的安全策略配置解决方案
配置IIS网站web服务器的安全策略配置解决方案 2019-05-23
Nginx服务器究竟是怎么执行PHP项目
Nginx服务器究竟是怎么执行PHP项目 2019-05-24
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情 2019-06-22
返回顶部