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

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

查看示例：DEMO

复制代码 代码如下:

shuro
8分钟前 说：

评论内容。。。

...

复制代码 代码如下:

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

复制代码 代码如下:

function formatSay($say,$dt,$uid){
$say=htmlspecialchars(stripslashes($say));
return'

style="max-width:90%" alt="demo" />

demo_'.$uid.' '.tranTime($dt).' 说：

vue-store高仿小米商城

本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、购物车、订单结算页面、我的订单以及错误处理页面。实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、登录、注册、用户购物车、订单结算

1

查看详情

'.$say.'

复制代码 代码如下:

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 $str = '刚刚';
}
elseif ($time $min = floor($time/60);
$str = $min.'分钟前';
}
elseif ($time $h = floor($time/(60*60));
$str = $h.'小时前 '.$htime;
if($ds==1)
$str = '昨天 '.$rtime;
}
elseif ($time $str = '昨天 '.$rtime;
if($ds==2)
$str = '前天 '.$rtime;
}elseif($time $str = '前天 '.$rtime;
if($ds>2)
$str = $rtime;
}
else {
$str = $rtime;
}
return $str;
}

复制代码 代码如下:

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]);
}

复制代码 代码如下:

复制代码 代码如下:

$(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();
});
});
})();
});