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


Posted in PHP onOctober 08, 2011

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

查看示例:DEMO

XHTML
<div id="demo"> 
<div class="saylist"> 
<a href="#"><img src="images/0.jpg" width="50" height="50" alt="demo" /></a> 
<div class="saytxt"> 
<p><strong><a href="https://3water.com">Shuro</a></strong><span> 
8分钟前</span> 说:</p> 
<div class="say">评论内容。。。</div> 
</div> 
</div> 
... 
</div>

上述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' 
<div class="saylist"><a href="#"><img src="images/'.$uid.'.jpg" width="50" 
height="50" alt="demo" /></a> 
<div class="saytxt"> 
<p><strong><a href="#">demo_'.$uid.'</a></strong> <span>'.tranTime($dt).'</span> 说: 
</p><div class="say">'.$say.'</div> 
</div> 
<div class="clear"></div> 
</div>'; 
}

时间轴函数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中输出评论列表。
<div id="demo"> 
<?php echo $sayList;?> 
</div>

这样一来,运行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 相关文章推荐
PHP入门
Oct 09 PHP
默默小谈PHP&amp;MYSQL分页原理及实现
Jan 02 PHP
PHP Header用于页面跳转要注意的几个问题总结
Oct 03 PHP
PHP session有效期问题
Apr 26 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
Dec 29 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
Jun 23 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
Sep 09 PHP
PHP中余数、取余的妙用
Jun 29 PHP
PHP程序员不应该忽略的3点
Oct 09 PHP
Laravel下生成验证码的类
Nov 15 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
Jan 15 PHP
PHP7 foreach() 函数修改
Mar 09 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
Oct 08 #PHP
php实现用户在线时间统计详解
Oct 08 #PHP
php 文件缓存函数
Oct 08 #PHP
php数字转汉字代码(算法)
Oct 08 #PHP
PHP判断远程url是否有效的几种方法小结
Oct 08 #PHP
php下利用curl判断远程文件是否存在的实现代码
Oct 08 #PHP
PHP下判断网址是否有效的代码
Oct 08 #PHP
You might like
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
Javascript的闭包
2009/12/31 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
angular十大常见问题
2017/03/07 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python中的变量和作用域详解
2016/07/13 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
python 随机森林算法及其优化详解
2019/07/11 Python
python读取mysql数据绘制条形图
2020/03/25 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
语文教育专业推荐信范文
2013/11/25 职场文书
师德个人剖析材料
2014/02/02 职场文书
小学生寒假家长评语
2014/04/16 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
关于学习的演讲稿
2014/05/10 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
实习单位指导教师评语
2014/12/30 职场文书
小学信息技术教学反思
2016/02/16 职场文书
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis