[小程序] 将日期时间转化为几天前,几小时前,几分钟前(完整代码)_多骨鱼

[小程序] 将日期时间转化为几天前,几小时前,几分钟前(完整代码)

2019-03-15 15:33:08  浏览:6109  作者:倔强的巴顿
在做微信小程序开发时,有些比较偏社交属性的小程序,通常会不直接显示日期时间,而是转为一个粗略、模糊的日期时间概念。即,前端显示为:N月前、N天前、N小时前、N分钟前、刚刚等。这种简化了的日期模式。

在做微信小程序开发时,有些比较偏社交属性的小程序,通常会不直接显示日期时间,而是转为一个粗略、模糊的日期时间概念。

即,前端显示为:N月前、N天前、N小时前、N分钟前、刚刚等。这种简化了的日期模式。


于是,我们就需要在小程序开发过程中配置一个通用方法/过滤器,将后端发来的默认日期格式转换为上面所述的简化日期。


# 详细源码 #

  const formatMsgTime = function (dateStr) {
      var dateObj = dateStr.replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').replace(/(-)/g, '/')
      var targetDate = new Date(dateObj);
      var year = targetDate.getFullYear();
      var month = targetDate.getMonth() + 1;
      var day = targetDate.getDate();
      var hour = targetDate.getHours();
      var minute = targetDate.getMinutes();
      var second = targetDate.getSeconds();
      var nowDate = new Date();
      var now_new = Date.parse(nowDate.toString());
      var milliseconds = 0;
      var timeSpanStr;
      milliseconds = now_new - targetDate;
      if (milliseconds <= 1000 * 60 * 1) {
          timeSpanStr = '刚刚';
      }
      else if (1000 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60) {
          timeSpanStr = Math.round((milliseconds / (1000 * 60))) + '分钟前';
      }
      else if (1000 * 60 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24) {
          timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60)) + '小时前';
      }
      else if (1000 * 60 * 60 * 24 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24 * 15) {
          timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60 * 24)) + '天前';
      }
      else if (milliseconds > 1000 * 60 * 60 * 24 * 15 && year == nowDate.getFullYear()) {
          timeSpanStr = month + '-' + day;
      } else {
          timeSpanStr = year + '-' + month + '-' + day;
      }
      return timeSpanStr;
  }
module.exports = {
    formatMsgTime: formatMsgTime
}


# 使用方法 #

1,将上述代码保存为utils-days.js文件,放置在小程序公用目录里;

2,在需要使用的页面或者模块的js文件头部,导入该文件;

const utilsDays = require('../utils/utils-days');

3, 使用该方法;

this.setData({
    newDate: utilsDays.formatMsgTime(systemDate);
})


# 下载源码 #

见该文章右侧下载链接


上一篇:已经是第一篇

下一篇:巧用CSS3-Animation动画,实现小程序弹幕效果

评论区

共 0 条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

【随机内容】

返回顶部