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 相关文章推荐
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
Angular 数据请求的实现方法
May 07 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 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
重新认识php array_merge函数
2014/08/31 PHP
PHP打印输出函数汇总
2016/08/28 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
推荐dojo学习笔记
2007/03/24 Javascript
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
调试Python程序代码的几种方法总结
2015/04/28 Python
python修改字典内key对应值的方法
2015/07/11 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
Python实现井字棋小游戏
2020/03/09 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
售后服务科岗位职责范文
2013/11/13 职场文书
大学生自我鉴定
2013/12/08 职场文书
书法比赛获奖感言
2014/02/10 职场文书
高中军训感言400字
2014/02/24 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
生日寿星公答谢词
2015/09/29 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
比较几种Redis集群方案
2021/06/21 Redis
Nginx 匹配方式
2022/05/15 Servers