PHP+Mysql+jQuery で情報の動的な表示を実装_PHP チュートリアル

WBOY

リリース： 2016-07-21 15:24:03

オリジナル

842 人が閲覧しました

このサイトの前に、Weibo のコメントを公開する方法を紹介する記事があります。PHP+Mysql+jQuery は、Weibo を公開するプログラム - jQuery を実現します。この例は、そのデータベース構造に基づいており、公開された情報を動的に表示します。

例を表示: デモ

シュロ 8 分前< ;/span> は言いました:

コメントの内容。。。

上記の HTML 構造は、ユーザーのコメント情報を表示するために使用されます。もちろん、この例では、PHP がこの XHTML コードを生成します。

CSS

 コードをコピーします 

 コードは次のとおりです: 

 #demo{width:400px; height:80px; margin:80px auto; border-bottom:1px dotted #d3d3d3} 
.saylist{margin: 8px 自動; 高さ: 80px; 
.saylist img{float:left; width:4px} 
.saytxt{float:right; } {line-height:18px} 
.saytxt pstrong{margin-right:6px} 
.saytxt p span{color:#999} 

.say{margin-top:3px; font-weight:もちろん、好みの外観スタイルをカスタマイズすることもできます。
PHP
function.phpには2つの関数があり、formatSay()はユーザーのコメントリストを出力する、つまり上記のHTMLを出力するために使用されます。

コードをコピーコードは次のとおりです:

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

height="50" alt="デモ" /

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); ",time());
$ ds = $today - $day_time;
$time = time() - $stime;
if ($time $str = 'just';
}
elseif ($time $min = Floor($time/60);
$str = $min.'分前'
}
elseif ($time $h = フロア($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 を実行するとリストが表示されます。これらを 1 つずつ表示するだけで済み、次のステップを実行するには jQuery が必要です。
jQuery

コードをコピーコードは次のとおりです:

 
$(function(){ 
//最初のsaylistの表示を除き、他のすべては非表示になります
$(".saylist").hide( ).eq (0).show(); 
//自己ループ関数、情報を表示するループ
(function showNextSay(){ 
//各メッセージは 7.5 秒間表示されます
$(".saylist:visible") .lay(7500). fadeOut("slow",function(){ 
$(this).appendTo("#demo"); 
//次の項目を表示 
$(".saylist:first").fadeIn( "slow",function() { 
//関数を再度呼び出します 
});





http://www.bkjia.com/PHPjc/324369.html

www.bkjia.com

true