在本站前面有文章介绍了如何实现发表微博说说:PHP+Mysql+jQuery实现发布微博程序--jQuery篇,本例将基于其数据库结构,用动态的方式展示发表的说说信息。
复制代码 代码如下:
<div id="demo">
<div class="saylist">
<a href="#"><img src="/UploadFiles/2021-04-02/0.jpg"><div class="saytxt">
<p><strong><a href="https://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="/UploadFiles/2021-04-02/'.$uid.'.jpg">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();
});
});
})();
});
查看示例:DEMO
XHTML复制代码 代码如下:
<div id="demo">
<div class="saylist">
<a href="#"><img src="/UploadFiles/2021-04-02/0.jpg"><div class="saytxt">
<p><strong><a href="https://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="/UploadFiles/2021-04-02/'.$uid.'.jpg">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();
});
});
})();
});
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]