ホームページ > php教程 > php手册 > PHP Mysql jQuery は情報の動的な表示を実装します

PHP Mysql jQuery は情報の動的な表示を実装します

WBOY
リリース: 2016-06-13 12:05:17
オリジナル
943 人が閲覧しました

在本站前面有文章介绍了如何实现发表微博说说: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'

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート