效果图  (通过js实现对时间处理);

这是时间处理的函数, 代码注释说明的也还清楚,   这是文件链接,可以直接打开,保存一下 https://blog-static.cnblogs.com/files/yk95/commonFunc.js

 1 function commentTimeHandle(dateStr) {
 2     // dateStr = 2018-09-06 18:47:00" 测试时间
 3     var publishTime = dateStr / 1000,  //获取dataStr的秒数  打印结果--1536230820000
 4         date = new Date(publishTime * 1000), //获取dateStr的标准格式 console.log(date) 打印结果  Thu Sep 06 2018 18:47:00 GMT+0800 (中国标准时间)
 5         // 获取date 中的 年 月 日 时 分 秒
 6         Y = date.getFullYear(),
 7         M = date.getMonth() + 1,
 8         D = date.getDate(),
 9         H = date.getHours(),
10         m = date.getMinutes(),
11         s = date.getSeconds();
12         // 对 月 日 时 分 秒 小于10时, 加0显示 例如: 09-09 09:01
13         if (M < 10) {
14             M = '0' + M;
15         }
16         if (D < 10) {
17             D = '0' + D;
18         }
19         if (H < 10) {
20             H = '0' + H;
21         }
22         if (m < 10) {
23             m = '0' + m;
24         }
25         if (s < 10) {
26             s = '0' + s;
27         }
28         // console.log("年", Y); // 年 2018
29         // console.log("月", M); // 月 09
30         // console.log("日", D); // 日 06
31         // console.log("时", H); // 时 18
32         // console.log("分", m); // 分 47
33         // console.log("秒", s); // 秒 00
34     var nowTime = new Date().getTime() / 1000, //获取此时此刻日期的秒数
35         diffValue = nowTime - publishTime,  // 获取此时 秒数 与 要处理的日期秒数 之间的差值
36         diff_days = parseInt(diffValue / 86400),    // 一天86400秒 获取相差的天数 取整
37         diff_hours = parseInt(diffValue / 3600),    // 一时3600秒
38         diff_minutes = parseInt(diffValue / 60),
39         diff_secodes = parseInt(diffValue);
40
41         if (diff_days > 0 && diff_days < 3) {  //相差天数 0 < diff_days < 3 时, 直接返出
42             return diff_days + "天前";
43         } else if (diff_days <= 0 && diff_hours > 0) {
44             return diff_hours + "小时前";
45         } else if (diff_hours <= 0 && diff_minutes > 0) {
46             return diff_minutes + "分钟前";
47         } else if (diff_secodes < 60) {
48             if (diff_secodes <= 0) {
49                 return "刚刚";
50             } else {
51                 return diff_secodes + "秒前";
52             }
53         } else if (diff_days >= 3 && diff_days < 30) {
54             return M + '-' + D + ' ' + H + ':' + m;
55         } else if (diff_days >= 30) {
56             return Y + '-' + M + '-' + D + ' ' + H + ':' + m;
57         }
58 }
59 module.exports = {
60     timeHandle: commentTimeHandle
61 }

页面数据是自己模拟的

 1 const test0Data = [
 2     {
 3         content: "有人知道漫威电影的观影顺序嘛? 狗狗出门要牵狗绳,带口罩啦!!!",
 4         time: '2018-11-16 10:19:05'
 5     },
 6     {
 7         content: "狗狗出门要牵狗绳,带口罩啦!!!",
 8         time: '2018-11-14 10:19:05'
 9     },
10     {
11         content: "现在各种旅游年卡越来越多,不知道该办哪一个?主要是想周末节假日带孩子去转转,请各位了解的朋友们给点意见~谢谢~",
12         time: '2018-11-12 16:19:05'
13     },
14     {
15         content: "现在配个眼镜都这么贵了?最少1000多!这个行业也太暴利了吧!",
16         time: '2018-11-04 12:09:05'
17     },
18     {
19         content: "健身房跑路了,怎么办!刚办的卡,3580。老板跑路了,最近几天一个员工没有,好多会员把器材都搬走了,搬空了,怎么办?",
20         time: '2018-09-01 22:19:05'
21     },
22 ]
23 module.exports = {
24    test0Data: test0Data
25 }

接着页面中去使用 时间处理的函数 和 假数据   

项目的目录是这样的    所以在页面要通过 import 将其导入

 1 // pages/test0/test0.js
 2 import { timeHandle } from '../../utils/commonFunc';
 3 import { test0Data } from '../../utils/data';
 4 Page({
 5     data: {
 6         pageData: []
 7     },
 8     onLoad: function (options) {
 9         test0Data.forEach(item => {
10             /**
11                 replace(/-/g, '/') 是为了处理IOS不兼容 2018-11-14 10:19:05
12                 new Date().getTime() 获取 item 下时间的 毫秒值
13             */
14             let d = new Date(item.time.replace(/-/g, '/')).getTime();
15             item.time = timeHandle(d);
16         });
17     },
18     onShow: function() {
19         this.setData({
20             pageData: test0Data
21         })
22     }
23 })

因为之前项目的需求, 时间也较赶,  现在回过头来温习一下, 正好记录一下.  

开心一刻:

  程xx遭遇车祸成植物人,医生说她活下来的希望只有万分之一,唤醒更为渺茫。她的同事和亲人没放弃,并根据程xx对testing痴迷的作风,每天都在她身边念:“你测的模块上线后回滚了。”奇迹发生了,程xx醒来第一句话:确认那模块是我测的?

                          

转载于:https://www.cnblogs.com/yk95/p/9970493.html

小程序--时间处理(显示几分钟前,,几小时前,,几天前...)相关推荐

  1. taro微信小程序时间组件picker的使用--省市区三级联动

    微信小程序时间组件实现三级联动 项目技术手段支撑 taro+react+scss实现的微信小程序 Picker使用说明 相信大家在微信小程序开放文档里面已经学会了使用组件picker实现时间,和单列组 ...

  2. 微信小程序时间标签与范围联动设计实现

    微信小程序时间标签与范围联动设计实现?最近忙于一个有关数据管理的微信小程序开发,遇到了上图情况,虽然很简单,还是整理一下.若有错误,请广大朋友们指正. 使用微信小程序组件radio-group.pic ...

  3. 第21课 微信小程序视频标签显示弹幕

    第21课 微信小程序视频标签显示弹幕 效果图如下: wxml代码如下: <videosrc="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideo ...

  4. 小程序时间轴和地区列表的实现,js+css实现时间轴效果

    老规矩先看效果图 先来看左图的地区列表是如何实现的. 我们在解析数据之前,要先看下数据结构 [{"_id": "XL28U3kPDdDCJ9m0"," ...

  5. 微信小程序点播插件_微信小程序 wxParse插件显示视频问题

    修改wxParse/html2json.js 文件 ,在 html2json(html, bindName)方法里 var node = { node: 'element', tag: tag, }; ...

  6. 支付宝小程序开发练习,显示自定义二维码(四)

    之前用了几种方式 1.后端生成二维码需要加密的字符窜,小程序前端利用二维码组件渲染canvas画出二维码,由于支付宝小程序没有这样的组件,于是去找微信小程序的解决方案,把微信小程序的二维码前端组件搬过 ...

  7. 电脑版微信小程序全屏显示方法,手机横屏方法。

    电脑版微信小程序全屏显示方法: 在app.json中加入:"resizable": true 注意要与"pages"同级,网上有许多错误方法! 手机横屏方法: ...

  8. uni-app分割线微信小程序端不显示

    uni-app分割线微信小程序端不显示 文章目录 uni-app分割线微信小程序端不显示 问题描述 解决方案 问题描述 做项目时,遇到一个问题: 自定义的分割线组件在web端能显示,在微信小程序端却不 ...

  9. 小程序图片不显示的解决方法

    小程序图片不显示的解决方法 检查图片命名是否为英文 图片是否使用image标签加载的 背景图片不能使用本地图片地址 图片名有没有空格

最新文章

  1. 上传图片被防火墙拦截_Web安全:文件上传漏洞
  2. openstack nova-compute 组件无法启动
  3. 2020 年微服务项目活跃度报告
  4. linux基础篇-系统中进程相关概念
  5. Musical Theme
  6. php存密码,php 登录验证的代码(基于文件保存的密码)
  7. 返回后的数据处理_【掘金使用技巧2】掘金返回数据中时间的处理方法
  8. NUC1921 E.迷雾森林【筛选法】
  9. 三丰三坐标编程基本步骤_日常皮肤护理的基本三步骤,问题皮肤不要作
  10. AD21怎么打印丝印层的PDF
  11. python输出最大的素数_Python:求X的最大素数
  12. shell脚本实战之坦克大战小游戏
  13. MySQL 5.7都即将停只维护了,是时候学习一波MySQL 8了
  14. Redis原生SET、SETNX、SETEX方法以及RedisTemplate的方法 + 分布式锁的实现
  15. app 登录成功后 保存登录账号 密码 以及读取
  16. web前端学习到什么程度可以面试工作
  17. redis 持久化和恢复
  18. pip 和 conda 什么区别?
  19. uC/OS和uClinux的比较
  20. 比较有效的Windows10卡硬盘解决方法

热门文章

  1. 部件mscomctl_mscomctl.ocx下载_mscomctl.ocx官方下载【32位64位】-太平洋下载中心
  2. uva 1645 count
  3. nginx服务器缓存文件清理,清除nginx缓存文件并不总是有效
  4. [原创] poi-tl 合并word文档 (使用NiceXWPFDocument)
  5. 基于Hashids的高效游戏礼包兑换码系统完整设计
  6. django orm原理_django 动态创建一个模型的多个table name, 并通过 Django ORM 操作
  7. treecnt 51Nod - 1677
  8. android项目飞机大战,Android 项目之飞机大战
  9. php拼音首拼,PHP 汉字转拼音(可首字母)
  10. 年度规划复盘及一些收获