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.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
javascript的几种写法总结
Sep 30 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 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模板,主要想体现一下思路
2006/12/25 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
php导出生成word的方法
2015/12/25 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
降低PHP Redis内存占用
2017/03/23 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
phpStorm2020 注册码
2020/09/17 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
用vue写一个日历
2020/11/02 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
python如何实现一个刷网页小程序
2018/11/27 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
如何将字串String转换成整数int
2015/02/21 面试题
厂长助理岗位职责
2013/12/27 职场文书
竞选演讲稿范文
2013/12/28 职场文书
运动会广播稿30字
2014/01/21 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
股东合作协议书
2014/04/14 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript