一、效果图

二、原始数据

array(6) {
[0]=>
array(8) {
["id"]=>
string(1) "6"
["userid"]=>
string(1) "1"
["friend_id"]=>
string(3) "843"
["content"]=>
string(10) "你好啊
"
["date_entered"]=>
string(19) "2019-08-01 08:42:07"
["thumb"]=>
string(116) "http://wx.qlogo.cn/mmopen/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw/0"
["visittime"]=>
int(1564620127)
["date"]=>
string(5) "08:42"
}
[1]=>
array(8) {
["id"]=>
string(1) "5"
["userid"]=>
string(1) "1"
["friend_id"]=>
string(3) "843"
["content"]=>
string(6) "哈哈"
["date_entered"]=>
string(19) "2019-08-01 08:41:58"
["thumb"]=>
string(116) "http://wx.qlogo.cn/mmopen/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw/0"
["visittime"]=>
int(1564620118)
["date"]=>
string(5) "08:41"
}
[2]=>
array(8) {
["id"]=>
string(1) "4"
["userid"]=>
string(1) "1"
["friend_id"]=>
string(3) "843"
["content"]=>
string(11) "8月1好啦"
["date_entered"]=>
string(19) "2019-08-01 08:41:47"
["thumb"]=>
string(116) "http://wx.qlogo.cn/mmopen/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw/0"
["visittime"]=>
int(1564620107)
["date"]=>
string(5) "08:41"
}
[3]=>
array(8) {
["id"]=>
string(1) "3"
["userid"]=>
string(1) "1"
["friend_id"]=>
string(3) "843"
["content"]=>
string(3) "456"
["date_entered"]=>
string(19) "2019-07-31 15:51:17"
["thumb"]=>
string(116) "http://wx.qlogo.cn/mmopen/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw/0"
["visittime"]=>
int(1564559477)
["date"]=>
string(5) "15:51"
}
[4]=>
array(8) {
["id"]=>
string(1) "2"
["userid"]=>
string(1) "1"
["friend_id"]=>
string(3) "843"
["content"]=>
string(3) "123"
["date_entered"]=>
string(19) "2019-07-31 15:50:23"
["thumb"]=>
string(116) "http://wx.qlogo.cn/mmopen/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw/0"
["visittime"]=>
int(1564559423)
["date"]=>
string(5) "15:50"
}
[5]=>
array(8) {
["id"]=>
string(1) "1"
["userid"]=>
string(1) "1"
["friend_id"]=>
string(3) "843"
["content"]=>
string(9) "开始啦"
["date_entered"]=>
string(19) "2019-07-31 15:47:24"
["thumb"]=>
string(116) "http://wx.qlogo.cn/mmopen/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw/0"
["visittime"]=>
int(1564559244)
["date"]=>
string(5) "15:47"
}
}

三、PHP处理函数

function groupVisit($visit)
{
$curyear = date('Y');
$visit_list = [];
foreach ($visit as $v) {
if ($curyear == date('Y', $v['visittime'])) {
$date = date('m月d日', $v['visittime']);
} else {
$date = date('Y年m月d日', $v['visittime']);
}
$visit_list[$date][] = $v;
}
return $visit_list;
}

处理后数据:

array(2) {
["08月01日"]=>
array(3) {
[0]=>
array(8) {
["id"]=>
string(1) "6"
["userid"]=>
string(1) "1"
["friend_id"]=>
string(3) "843"
["content"]=>
string(10) "你好啊
"
["date_entered"]=>
string(19) "2019-08-01 08:42:07"
["thumb"]=>
string(116) "http://wx.qlogo.cn/mmopen/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw/0"
["visittime"]=>
int(1564620127)
["date"]=>
string(5) "08:42"
}
[1]=>
array(8) {
["id"]=>
string(1) "5"
["userid"]=>
string(1) "1"
["friend_id"]=>
string(3) "843"
["content"]=>
string(6) "哈哈"
["date_entered"]=>
string(19) "2019-08-01 08:41:58"
["thumb"]=>
string(116) "http://wx.qlogo.cn/mmopen/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw/0"
["visittime"]=>
int(1564620118)
["date"]=>
string(5) "08:41"
}
[2]=>
array(8) {
["id"]=>
string(1) "4"
["userid"]=>
string(1) "1"
["friend_id"]=>
string(3) "843"
["content"]=>
string(11) "8月1好啦"
["date_entered"]=>
string(19) "2019-08-01 08:41:47"
["thumb"]=>
string(116) "http://wx.qlogo.cn/mmopen/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw/0"
["visittime"]=>
int(1564620107)
["date"]=>
string(5) "08:41"
}
}
["07月31日"]=>
array(3) {
[0]=>
array(8) {
["id"]=>
string(1) "3"
["userid"]=>
string(1) "1"
["friend_id"]=>
string(3) "843"
["content"]=>
string(3) "456"
["date_entered"]=>
string(19) "2019-07-31 15:51:17"
["thumb"]=>
string(116) "http://wx.qlogo.cn/mmopen/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw/0"
["visittime"]=>
int(1564559477)
["date"]=>
string(5) "15:51"
}
[1]=>
array(8) {
["id"]=>
string(1) "2"
["userid"]=>
string(1) "1"
["friend_id"]=>
string(3) "843"
["content"]=>
string(3) "123"
["date_entered"]=>
string(19) "2019-07-31 15:50:23"
["thumb"]=>
string(116) "http://wx.qlogo.cn/mmopen/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw/0"
["visittime"]=>
int(1564559423)
["date"]=>
string(5) "15:50"
}
[2]=>
array(8) {
["id"]=>
string(1) "1"
["userid"]=>
string(1) "1"
["friend_id"]=>
string(3) "843"
["content"]=>
string(9) "开始啦"
["date_entered"]=>
string(19) "2019-07-31 15:47:24"
["thumb"]=>
string(116) "http://wx.qlogo.cn/mmopen/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw/0"
["visittime"]=>
int(1564559244)
["date"]=>
string(5) "15:47"
}
}
}
{"08\u670801\u65e5":[{"id":"6","userid":"1","friend_id":"843","content":"\u4f60\u597d\u554a\n","date_entered":"2019-08-01 08:42:07","thumb":"http:\/\/wx.qlogo.cn\/mmopen\/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw\/0","visittime":1564620127,"date":"08:42"},{"id":"5","userid":"1","friend_id":"843","content":"\u54c8\u54c8","date_entered":"2019-08-01 08:41:58","thumb":"http:\/\/wx.qlogo.cn\/mmopen\/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw\/0","visittime":1564620118,"date":"08:41"},{"id":"4","userid":"1","friend_id":"843","content":"8\u67081\u597d\u5566","date_entered":"2019-08-01 08:41:47","thumb":"http:\/\/wx.qlogo.cn\/mmopen\/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw\/0","visittime":1564620107,"date":"08:41"}],"07\u670831\u65e5":[{"id":"3","userid":"1","friend_id":"843","content":"456","date_entered":"2019-07-31 15:51:17","thumb":"http:\/\/wx.qlogo.cn\/mmopen\/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw\/0","visittime":1564559477,"date":"15:51"},{"id":"2","userid":"1","friend_id":"843","content":"123","date_entered":"2019-07-31 15:50:23","thumb":"http:\/\/wx.qlogo.cn\/mmopen\/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw\/0","visittime":1564559423,"date":"15:50"},{"id":"1","userid":"1","friend_id":"843","content":"\u5f00\u59cb\u5566","date_entered":"2019-07-31 15:47:24","thumb":"http:\/\/wx.qlogo.cn\/mmopen\/PiajxSqBRaEJKa1QdSvmwdHzRA6Kw4O72ItIxNJTbvwP6eUcIxIFjr6pmnMYOPzAZLxXB4xFfn63s1iaAYV8Zfbw\/0","visittime":1564559244,"date":"15:47"}]}

四、前端部分代码

var result = "";
for (var i = 0; i < date.length; i++) {
//判断是否在数组中存在,存在则追加列表,不存在则显示追加日期
if (contains(arr2, date[i]) == false) {
result += `<li class="aui-list-header" style="background: #fff;line-height: inherit;border-bottom: 1px solid #f5f5f5;padding: .5rem 0 .5rem .75rem;font-size: .7rem;">
` + date[i] + `
</li>`;
arr2.push(date[i]);
}
for (var j = 0; j < data[date[i]].length; j++) {
result += `<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width: 3rem;text-align: center;">
<img class="icon-item" src="` + data[date[i]][j].thumb + `" alt="">
</div>
<div class="aui-list-item-inner" style="align-items: center;">
<div class="aui-list-item-text" style="height: 100%;">
<div class="aui-list-item-title" style="font-size: .7rem !important;">新增记录:<span style="color: #f00;">` + data[date[i]][j].content + `</span></div>
<div class="aui-list-item-right user-come" style="font-size: .6rem !important;">` + data[date[i]][j].date + `</div>
</div>
</div>
</div>
</li>`;
}
}

最新文章

  1. Oracle初级函数的使用
  2. NET映射导致的应用无法访问
  3. init.css
  4. cuda计算的分块
  5. Matlab中mat2cell的使用
  6. POJ 3169 Layout 差分约束系统
  7. iOS 摇一摇的实现-备用
  8. SQL执行过程中的性能负载点
  9. 为什么MySQL数据库要用B+树存储索引?
  10. JVM入门
  11. es6的几种写法
  12. mysql学习笔记--数据库操作
  13. [转]js版的md5()
  14. P4306 [JSOI2010]连通数
  15. hdu4847 Wow! Such Doge! KMP
  16. pageshow和pagehide事件
  17. LeetCode 141. Linked List Cycle环形链表 (C++)
  18. c++中用vector创建多维数组的初始化方法
  19. http头解释
  20. peek函数的用法

热门文章

  1. 基于Docker的Kafka部署
  2. SqlServer用sql语句清理log日志
  3. 校验用户名是否存在(ajax+jackson)
  4. scp2自动部署
  5. js如何获取数值
  6. K2 BPM_【解决方案】从流程梳理到落地,K2为企业打造流程管理闭环_全业务流程管理专家
  7. 部署在SAP Cloud Platform CloudFoundry环境的应用如何消费SAP Leonardo机器学习API
  8. Flutter——Stack组件(层叠组件)、Align组件、Positioned组件
  9. Metasploit Penetration (第一夜加班)
  10. CSS复合选择器和div盒子模型