vue中根据时间戳判断对应的时间(今天 昨天 前天)


Posted in Javascript onDecember 20, 2019

根据时间戳 来显示对应的时间段

本文是根据vue缩写,但是原理都是想通的

根据一个时间戳,然后来显示对应的时间段。如果为今天,则显示对应的time,如果为昨天,则显示为昨天,如果为前天,则显示为前天。剩下的显示为对应的日期

需求定义好了,然后开始实现:

首先,是把时间戳转换为对应的时间格式,js提供了原生的获取对应年、月、日等格式的方法,但是不够灵活,这里提供了一个网上找的比较灵活获取固定格式的函数。

const formatDate = (date, fmt) => {
 date = new Date(date);
 if (typeof (fmt) === "undefined") {
  fmt = "yyyy-MM-dd HH:mm:ss";
 }
 if (/(y+)/.test(fmt)) {
  fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
 }
 let o = {
  'Y': date.getFullYear(),
  'M+': date.getMonth() + 1,
  'd+': date.getDate(),
  'H+': date.getHours(),
  'm+': date.getMinutes(),
  's+': date.getSeconds()
 }
 for (let k in o) {
  if (new RegExp(`(${k})`).test(fmt)) {
   let str = o[k] + ''
   fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : ('00' + str).substr(str.length));
  }
 }
 return fmt
}

使用这个函数,需要提供一个时间戳和一个日期格式。

// `+new Date()` 为获取当前时间戳的简写形式 
// `yyyy-MM-dd HH:mm:ss`为想要获取的日期格式
formatDate(+new Date(), 'yyyy-MM-dd HH:mm:ss') // 2019-12-18 20:29:31

接下来是使用过滤器来对时间戳进行过滤。vue提供了过滤器,可以定义全局过滤器和本地过滤器,我们定义一个本地过滤器

// common.js
// 这里使用模块化,把过滤器函数定义在外部js文件内
const formatDate ......

export { formatDate }

// index.vue
import { formatDate } from 'common'

export default {
 data () {
 return {
  time: 1576673222857
 }
 },
 methods: {},
 created() {},
 filters: {
 formateDate(data, fmt) {
  return formatDate(data, fmt)
 }
 }
}

定义好了过滤器,就可以在页面中使用了

// index.vue

<template>
 <div>
 <span>{{ time | formateDate('MM-dd') }}</span>
 </div>
</template>

使用|(管道符)来对时间戳进行过滤,管道符左侧为过滤器的第一个参数,第二个参数为过滤的格式。定义好之后就会根据格式显示对应的时间格式了。

接下来最后一步就是对比今天的日期,来显示对应的时间(昨天,前天)
这里使用vue的if else来判断应该显示哪种日期格式。

<template>
 <div>
 <span v-if="new Date(time).getDate() === new Date().getDate()">{{ time | formateDate('HH:mm') }}</span> 
 // 这里把时间戳转换为`日`,然后跟当前的`日`进行比较,如果相等,则说明是今天的时间戳,则显示`time`
 <span v-else-if="new Date(time).getDate() === (new Date().getDate() - 1)">{{ time | formateDate('HH:mm') }}</span> 
  // 这里把**当前**的时间戳 `-1`,说明是昨天。比如说今天是18日,`-1`之后就是17,如果`time`转换后 与 17 相等,说明应该显示为`昨天`。
  <span v-else-if="new Date(time).getDate() === (new Date().getDate() - 2)">{{ time | formateDate('HH:mm') }}</span> 
  // `-2`为`前天`
  <span v-else>{{ time | formateDate('MM-dd') }</span>
  // 否则显示为对应的日期
 </div> 
</template>

好了,以上是根据日期去比较来显示对应的时间。—— 但是,你以为完了吗?

有一个重要的问题就是,每个月都有30日中的其中一日,今天是12月18日,比较18相等,显示对应的时间,但是如果为11月18日呢?如果还显示对应的时间显然是不对了。

所以应该把年、月、日 全都对比一下,然后在确定对应的时间。

所以代码应该如下:

<span class="lastDate"
  v-if="(new Date(time).getDate() == new Date().getDate()) && (new Date(item.lastTime).getMonth() == new Date().getMonth()) && (new Date(item.lastTime).getYear() == new Date().getYear())"
   >{{time | FormatDate( 'HH:mm')}}</span>
   
 <span class="lastDate"
  v-if="(new Date(time).getDate() == new Date().getDate() - 1) && (new Date(item.lastTime).getMonth() == new Date().getMonth()) && (new Date(item.lastTime).getYear() == new Date().getYear())"
   >昨天</span>

 <span class="lastDate"
  v-if="(new Date(time).getDate() == new Date().getDate() - 1) && (new Date(item.lastTime).getMonth() == new Date().getMonth()) && (new Date(item.lastTime).getYear() == new Date().getYear())"
   >前天</span>
   
 <span v-else>{{ time | formateDate('MM-dd') }</span>

虽然是完成了比较年月日后,来显示对应的日期。但是看看这些代码巨丑无比,而且极不容易理解,所以,我们不应该在html里面写这么多判断代码,so,我们来封装成一个函数,然后在来使用函数对比。

在封装函数之前,我们先确定一下,上面这些判断代码中,有哪些相同的地方,哪些不同的地方。

相同的是

  • 使用new Date(time) 来对比new Date()
  • 使用getDate() / getMonth() / getYear()
  • 使用两个&&来对比

不同的是

  • 一个new Date()里面需要参数time,一个不要参数

有些需要-对应的数字

大概梳理了一下出以上部分,把相同的写进函数内,不同的使用形参,也就是arguments。

// common.js

const compareDate = (timestamp, day = 0) => {
 // timestamp 为要传入的时间戳
 // day 为要减去的日子 因为比较*当天*的话,是不需要减的,所以默认定义成0,
 
 // 根据上面分析,有些需要参数`time`,有些不需要,所以使用一个函数来区分一下 
 let newDate = (time = null) => {
 return time === null ? new Date() : new Date(time)
 }
 
 // 这里返回 比较后的值,比较成功,则返回`true`,失败则返回`false`
 return (newDate(timestamp).getDate() == newDate().getDate() - day) && (newDate(timestamp).getMonth() == newDate().getMonth()) && (newDate(timestamp).getYear() == newDate().getYear()) 
}

export {
 compareDate
}

上面就是封装好的函数,但是有一个问题,就是函数里面写死了比较年月日,因为目前都需要比较三个,就先这样,有时间在改为根据参数在来区分比较年或月或日。

然后就可以使用了,使用的时候需要注意一下,我的这篇博客里面已经说了,这里就不细说, 直接放代码:

// index.vue
import { compareDate } from 'common.js'
data() {
 return {
 compare: compareDate
 }
}
<template>
 <div>
  <span v-if="compare(time)">{{time | FormatDate( 'HH:mm')}}</span>
  <span v-else-if="compare(time, 1)">昨天</span>
  <span v-else-if="compare(time, 2)">前天</span>
   <span v-else>{{time | FormatDate( 'MM-d')}}</span>
 </div> 
</template>

这样是不是简洁了很多呢?,而且也容易理解,看着也清晰。

以上就是根据时间戳,来比较当前时间显示对应的日期。如果有更好的方法欢迎讨论。如果有疑问也可以留言。

总结

以上所述是小编给大家介绍的vue中根据时间戳判断对应的时间(今天 昨天 前天),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
javascript实现切换td中的值
Dec 05 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
angularjs模态框的使用代码实例
Dec 20 #Javascript
推荐几个不错的console调试技巧实现
Dec 20 #Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 #Javascript
node使用request请求的方法
Dec 20 #Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 #Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 #Javascript
js正则匹配多个全部数据问题
Dec 20 #Javascript
You might like
摩卡咖啡
2021/03/03 咖啡文化
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
js中function()使用方法
2013/12/24 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
python中list常用操作实例详解
2015/06/03 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
运动会入场解说词
2014/02/07 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
城管年度个人总结
2015/02/28 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
班主任开场白
2015/06/01 职场文书
九九重阳节致辞
2015/07/31 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL