Php+mysql+jquery Implement dynamic Display information _php skills

In front of the site an article introduced how to achieve the publication of micro-blog said: Php+mysql+jquery implementation of the release of Micro-blog program--jquery, this example will be based on its database structure, the dynamic way to display the said information.

View Example: DEMO

Xhtml

Copy Code code as follows:

<div id= "Demo" >
<div class= "Saylist" >
<a href= "#" ></a>
<div class= "Saytxt" >
<p><strong><a href= "Http://www.jb51.net" >Shuro</a></strong><span>
8 minutes ago </span> said:</p>
<div class= "Say" > Comments ... </div>
</div>
</div>
...
</div>

The HTML structure described above consists of N. saylist to show the user's comments, and of course in this case, PHP will be responsible for generating this XHTML code.
Css

Copy Code code as follows:

#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}

Use the CSS above to render the HTML appearance, and of course you can customize your own style of appearance.
Php
There are two functions in function.php, and Formatsay () is used to output the list of user comments, that is, to output the HTML above.

Copy Code code as follows:

function Formatsay ($say, $dt, $uid) {
$say =htmlspecialchars (Stripslashes ($say));
Return
<div class= "saylist" ><a href= "#" ><img src= "images/". $uid. JPG "width=" 50 "
"Height=" alt= "Demo"/></a>
<div class= "Saytxt" >
<p><strong><a href= "#" >demo_ '. $uid. ' </a></strong> <span> '. Trantime ($DT). ' </span> said:
</p><div class= "Say" > '. $say. ' </div>
</div>
<div class= "Clear" ></div>
</div> ';
}

The Timeline function trantime () converts the time into a format such as "1 hours ago", which can be read in this article: PHP to implement the timeline function

Copy Code code as follows:

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 = ' just ';
}
ElseIf ($time < 60 * 60) {
$min = Floor ($time/60);
$str = $min. ' Minutes ago ';
}
ElseIf ($time < 60 * 60 * 24) {
$h = Floor ($time/(60*60));
$str = $h. ' Hour ago '. $htime;
if ($ds ==1)
$str = ' Yesterday '. $rtime;
}
ElseIf ($time < 60 * 60 * 24 * 2) {
$str = ' Yesterday '. $rtime;
if ($ds ==2)
$str = ' Day before yesterday '. $rtime;
}elseif ($time < 60 * 60 * 24 * 3) {
$str = ' Day before yesterday '. $rtime;
if ($ds >2)
$str = $rtime;
}
else {
$str = $rtime;
}
return $str;
}

Then call funciton.php in index.php and connect the MySQL database output comment list.

Copy Code code as follows:

Require_once (' connect.php '); Connecting to a database file
Require_once (' function.php '); function file
$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]);
}

Output a list of comments in Div#demo.

Copy Code code as follows:

<div id= "Demo" >
<?php echo $sayList;? >
</div>

In this way, the run index.php will appear a list, we need only one piece of the show, the following will need jquery to do.
Jquery

Copy Code code as follows:

$ (function () {
///Except for the first saylist, the other hides the
$ (". Saylist"). Hide (). EQ (0 ). Show ();
//self-looping functions, looping display information
(function Shownextsay () {
//Per Message display 7.5 sec
$ (". Saylist:visible"). Delay (7500). fadeout (" Slow ", function () {
$ (this). Appendto (" #demo ");
//Show next
$ (". Saylist:first"). FadeIn ("Slow", function () {
//re-invoke function
Shownextsay ();
});
});
}) ();
});