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

查看示例：DEMO

<br> <br> <br><img src="https://www.gxlcms.com/images/0.jpg" width="50" height="50" alt="demo"> <br> <br><p><strong>Shuro</strong><span> <br>8分钟前</span> 说：</p> <br>评论内容。。。 <br> <br> <br>... <br> <br> <br>上述HTML结构由N个.saylist构成，用于展示用户的评论信息，当然在本例中，将由PHP负责生成这段XHTML代码。 <br>CSS <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>#demo{width:400px; height:80px; margin:80px auto; border-bottom:1px dotted #d3d3d3} <br>.saylist{margin:8px auto; height:80px; padding:4px 0;} <br>.saylist img{float:left; width:50px; margin:4px} <br>.saytxt{float:right; width:320px; overflow:hidden} <br>.saytxt p{line-height:18px} <br>.saytxt p strong{margin-right:6px} <br>.saytxt p span{color:#999} <br>.say{margin-top:3px; font-size:14px; font-weight:bold} <br> <br>使用上述CSS渲染HTML外观，当然你也可以自己定制你喜欢的外观样式。 <br>PHP <br>在function.php中有两个函数，formatSay()用来</li></ol></pre>输出用户评论列表，即

<br>function formatSay($say,$dt,$uid){ <br>$say=htmlspecialchars(stripslashes($say)); <br>return' <br><img src="https://www.gxlcms.com/images/'.$uid.'.jpg" width="50" <br="">height="50" alt="demo" /> <br> <br><p><strong>demo_'.$uid.'</strong> <span>'.tranTime($dt).'</span> 说： <br></p>'.$say.' <br> <br> <br>'; <br>} <br> <br>时间轴函数tranTime()将时间转换成如“1小时前”的格式，详情可阅读本站文章：PHP实现时间轴函数 <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>function tranTime($stime) { <br>$rtime = date("m-d H:i",$stime); <br>$htime = date("H:i",$stime); <br>$day_time = date("j",$stime); <br>$today=date("j",time()); <br>$ds = $today - $day_time; <br>$time = time() - $stime; <br>if ($time < 60) { <br>$str = '刚刚'; <br>} <br>elseif ($time < 60 * 60) { <br>$min = floor($time/60); <br>$str = $min.'分钟前'; <br>} <br>elseif ($time < 60 * 60 * 24) { <br>$h = floor($time/(60*60)); <br>$str = $h.'小时前 '.$htime; <br>if($ds==1) <br>$str = '昨天 '.$rtime; <br>} <br>elseif ($time < 60 * 60 * 24 * 2) { <br>$str = '昨天 '.$rtime; <br>if($ds==2) <br>$str = '前天 '.$rtime; <br>}elseif($time < 60 * 60 * 24 * 3){ <br>$str = '前天 '.$rtime; <br>if($ds>2) <br>$str = $rtime; <br>} <br>else { <br>$str = $rtime; <br>} <br>return $str; <br>} <br> <br>然后在index.php中调用funciton.php，并连接MySQL数据库</li></ol></pre>输出评论列表。 <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>require_once('connect.php'); //连接数据库文件 <br>require_once('function.php'); //函数文件 <br>$query=mysql_query("select * from say order by id desc limit 0,15"); <br>while ($row=mysql_fetch_array($query)) { <br>$sayList.=formatSay($row[content],$row[addtime],$row[userid]); <br>} <br> <br>在div#demo中</li></ol></pre>输出评论列表。 <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br> <br><!--?php echo $sayList;?--> <br> <br> <br>这样一来，运行index.php会出现一个列表，我们只需要一条一条展示，下面就需要jQuery来办了。 <br>jQuery <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>$(function(){ <br>//除了显示第一个saylist,其他的都隐藏 <br>$(".saylist").hide().eq(0).show(); <br>//自循环函数，循环展示信息 <br>(function showNextSay(){ <br>//每条信息展示7.5秒 <br>$(".saylist:visible").delay(7500).fadeOut("slow",function(){ <br>$(this).appendTo("#demo"); <br>//展示下一条 <br>$(".saylist:first").fadeIn("slow",function(){ <br>//再次调用函数 <br>showNextSay(); <br>}); <br>}); <br>})(); <br>}); <br>                    </li></ol></pre></li></ol></pre>