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

在本站前面有文章介绍了如何实现发表微博说说: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="http://www.jb51.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();
});
});
})();
});

(0)

相关推荐

  • 如何解决PHP使用mysql_query查询超大结果集超内存问题

    再使用mysql_query查询超大结果集的时候会出现超出内存限制的致命错误,这是因为mysql_query采用的是查询全部结果然后把结果集全部缓存到内存中的方式. mysql的查询还提供了另外一种查询方式,函数名为mysql_unbuffered_query,这个函数采用的是查出结果后立即操作结果集,并不会把结果集缓存到内存中,这样就避免了超出内存的情况发生.但是使用这个方法的代价就是不能再查询的时候使用获取总行之类的方法,因为这种方法是便查询边返回结果.同时在使用该方法的时候不能在同一数据库

  • jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

    实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回JSON数据给前端处理,即实现联动效果! 为便于讲解,这里直接给出省份:河南省(sf_id=1)  浙江省(sf_id=2),而地市和学生信息则分别建立两张数据表!编码方式均为:utf8!新建数据库并执行以下SQL语句! 复制代码 代码如下: /* 地市表 */ create TABLE IF NOT EXISTS `dishi`( `ds_id` int(3)

  • 解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)

    [错误原因]:mysql_query执行超时.[解决办法]:修改php.ini中的 max_execution_time的值,默认为300,单位是秒,例如:;max_execution_time = 300;将其改为:max_execution_time = 3000最后,重新启动服务管理器即可~

  • PHP+Mysql+jQuery实现发布微博程序 jQuery篇

    该应用实现了即时统计输入字数,并且通过ajax与后台交互,将输入内容插入到话题列表中.我将整个流程分为两部分,本文讲解第一部分jquery实现前端交互操作. 首先查看示例:DEMO XHTML 复制代码 代码如下: <form id="myform" action="" method="post"> <h3><span class="counter">140</span>说说你正

  • 基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码

    先给大家展示效果图: 查看演示 下载源码 这是一个非常实用的投票实例,应用在双方观点对抗投票场景.用户可以选择支持代表自己观点的一方进行投票,本文以红蓝双方投票为例,通过前后台交互,直观展示红蓝双方投票数和所占比例,应用非常广泛. 本文是一篇综合知识应用类文章,需要您具备PHP.jQuery.MySQL以及html和css方面的基本知识. HTML 我们需要在页面中展示红蓝双方的观点,以及对应的投票数和比例,以及用于投票交互的手型图片,本例以#red和#blue分别表示红蓝双方..redhand

  • PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别

    虽然nosql变得流行,但是我感觉sql还是主流 今天在翻php manul的时候,发现mysqli 的查询可以传递一个有意思的参数 复制代码 代码如下: @mysqli_query($this->sql,$SQL,($method ? MYSQLI_USE_RESULT : MYSQLI_STORE_RESULT)); 在php manul上面对这两个参数是这样解释的. 复制代码 代码如下: Either the constant MYSQLI_USE_RESULT or MYSQLI_STO

  • jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果. HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页.下一页. 当然,别忘了,在head中预先载入jquery

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

    在本站前面有文章介绍了如何实现发表微博说说:PHP+Mysql+jQuery实现发布微博程序--jQuery篇,本例将基于其数据库结构,用动态的方式展示发表的说说信息. 查看示例:DEMO XHTML 复制代码 代码如下: <div id="demo"> <div class="saylist"> <a href="#"><img src="images/0.jpg" width=&q

  • 基于jQuery实现动态数字展示效果

    我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据.本文将结合实例给大家介绍使用jQuery实现动态数字展示效果. 查看演示 下载源码 HTML代码 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: <div class="count">当前在线:<span id="number"> &

  • Jquery动态替换div内容及动态展示的方法

    本文实例讲述了Jquery动态替换div内容及动态展示的方法.分享给大家供大家参考.具体分析如下: 一.问题: 项目中需要在后台拼接html然后在前台通过ajax展示到div中: 复制代码 代码如下: sys_ajaxGet("/dynamic/default.do?method=show", {guid:guid},function(json){        //这里可以正确的展示html内容           alert(json.htmlContent);          

  • PHP+Mysql+jQuery文件下载次数统计实例讲解

    项目中我们需要统计文件的下载次数,用户每下载一次文件,相应的下载次数加1,类似的应用在很多下载站中用到.本文结合实例使用PHP+Mysql+jQuery,实现了点击文件,下载文件,次数累加的过程,整个过程非常流畅. 准备工作 本实例需要读者具备PHP.Mysql.jQuery以及html.css等相关的基本知识,在开发示例前,需要准备Mysql数据表,本文假设有一张文件下载表downloads,用来记录文件名.保存在文件服务器上的文件名以及下载次数.前提是假设下载表中已存在数据,这些数据可能来自

  • 使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

    一.写在前面 1. Bootstrap是一个由 Twitter 开发和维护的前端框架,目前很受欢迎,Bootstrap中文网点击这里. 2. Vue.js 是一套构建用户界面的渐进式框架,点这里访问官网. 二.实现效果: 三.页面引入bootstrap.vue资源 <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="e

  • PHP+Mysql+jQuery中国地图区域数据统计实例讲解

    今天我要给大家介绍在实际应用中,如何把数据载入到地图中.本文结合实例,使用PHP+Mysql+jQuery实现中国地图各省份数据统计效果. 本例以统计某产品在各省份的活跃用户数为背景,数据来源于mysql数据库,根据各省份的活跃用户数,分成不同等级,并以不同的背景色显示各省份的活跃程度,符合实际应用需求. HTML 首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件. <script type="text/javascript" src=

  • JQuery Ajax动态生成Table表格

    前言: 本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里. 目标: a 熟悉简单JQuery Ajax的使用 b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll) c 熟悉下handler的基本用法 1 简单效果图 2 前台代码 <%@ Page Language="C#" AutoEventWireup=&q

  • JQuery实现动态添加删除评论的方法

    本文实例讲述了JQuery实现动态添加删除评论的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解

    想拖动页面上的层,完全可以用jQuery ui的Draggable方法来实现,那如何将拖动后层的位置保存下来呢?本文将给出答案.本文讲解了如何采用PHP+MySQL+jQuery,实现随意拖动层并即时保存拖动位置. 本文原理就是通过拖动将拖动后层的相对位置left,top和z-index三个参数更新到数据表中对应的记录,页面通过CSS解析每个层不同的位置.请看具体实现步骤. 准备MySQL数据表 首先需要准备一张表notes,用来记录层的内容,背景色和坐标等信息. CREATE TABLE IF

  • 利用 Flask 动态展示 Pyecharts 图表数据的几种方法

    本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀... Flask 模板渲染 1. 新建一个项目 flask-echarts 在编辑器中选择 New Project,然后选择 Flask,创建完之后,Pycharm 会帮我们把启动脚本和模板文件夹都建好 2. 拷贝 pyecharts 模板 将链接中的以下模板 ├── jupyter_lab.html ├── jupyter_notebook.h

随机推荐