巅云智能建站平台搭建版(创业门户版)火爆上线,终身授权!新增:文章智能采集+全站真静态打包+城市分站+智能小程序+非法词过滤+H5自适应+智能链词等功能功能详情
建站资讯News

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

0
一佰互联网站建设(www.yinxi.net) 发布时间:2019-04-30 09:22:01 浏览数: 103
在本站前面有文章介绍了如何实现发表微博说说: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="//www.yinxi.net">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开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

上一篇:PHP实现时间轴函数代码
下一篇: PHP+Mysql+jQuery实现发布微博程序 jQuery篇
[返回新闻列表]

相关新闻more

10
03月
创业不容易,虽然有95%的公司都没办法活下来

不想再打工受老板气了,不想和一群成不了气候的人干了,自己创业开公司,想怎么样就怎么样!这是很多人的人生目标,这也是这个时代给我们的大好机会。... >>详情

30
04月
PHP array_multisort()函

函数bool array_multisort ( array &$arr [, mixed $arg = SORT_ASC [, mixed... >>详情

29
04月
深入解读php中关于抽象(abstract)

在面向对象(OOP)语言中,一个类可以有一个或多个子类,而每个类都有至少一个公有方法作为外部代码访问的接口。而抽象方法就是为了方便继承而引入... >>详情

11
04月
我用目标导向设计法,完成了爱奇艺PC站风云榜

爱奇艺PC站的风云榜,是一个提供各种频道榜单的荟萃之地。其存在的主要功能,是让用户能够了解热门的剧目,从中选择想看的影片,也能够了解最近都在... >>详情

高端网站建设

美工兼顾SEO,为企业电子商务营销助力!

电话:

023-85725751
建站

产品

域名注册 虚拟主机 云服务器 企业邮局
智能建站 APP打包 微站/小程序 创业平台
网站推广 媒体营销 智能采集 AI机器人
400电话 短信营销 店销机器人
私人定制 门户网站