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 的ArrayAccess接口 像数组一样来访问你的PHP对象
Oct 12 PHP
《PHP编程最快明白》第三讲:php数组
Nov 01 PHP
php中通过Ajax如何实现异步文件上传的代码实例
May 07 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
Apr 15 PHP
PHP中is_file不能替代file_exists的理由
Mar 04 PHP
php数组合并array_merge()函数使用注意事项
Jun 19 PHP
php实现的双向队列类实例
Sep 24 PHP
php中使用session防止用户非法登录后台的方法
Jan 27 PHP
PHP人民币金额转大写实例代码
Oct 02 PHP
PHP MVC框架skymvc支持多文件上传
May 26 PHP
PHP+Mysql分布式事务与解决方案深入理解
Feb 27 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
php smarty函数扩展
2010/03/15 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
第六章 php目录与文件操作
2011/12/30 PHP
浅谈PHP中的
2016/04/23 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
python cookielib 登录人人网的实现代码
2012/12/19 Python
整理Python中的赋值运算符
2015/05/13 Python
Python查看微信撤回消息代码
2018/06/07 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python的help函数如何使用
2020/06/11 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
平面设计专业大学生职业规划书
2014/03/12 职场文书
跑操口号
2014/06/12 职场文书
政风行风评议整改方案
2014/09/15 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
创业计划书之便利店
2019/09/05 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
nginx 配置缓存
2022/05/11 Servers