Heim > php教程 > php手册 > PHP+Mysql+jQuery实现动态展示信息

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

WBOY
Freigeben: 2016-06-13 12:05:17
Original
943 Leute haben es durchsucht

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

查看示例:DEMO

XHTML

复制代码 代码如下:




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()用来输出用户评论列表,即输出上文中的HTML。

复制代码 代码如下:


function formatSay($say,$dt,$uid){
$say=htmlspecialchars(stripslashes($say));
return'

PHP+Mysql+jQuery实现动态展示信息 style="max-width:90%" 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 $str = '刚刚';
}
elseif ($time $min = floor($time/60);
$str = $min.'分钟前';
}
elseif ($time $h = floor($time/(60*60));
$str = $h.'小时前 '.$htime;
if($ds==1)
$str = '昨天 '.$rtime;
}
elseif ($time $str = '昨天 '.$rtime;
if($ds==2)
$str = '前天 '.$rtime;
}elseif($time $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();
});
});
})();
});

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage