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的朋友可以看下)
Jul 22 Javascript
javascript 精粹笔记
May 09 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
vuex存取值和映射函数使用说明
Jul 24 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
js实现简单的倒计时
Jan 28 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 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
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
jQuery 自定义函数写法分享
2012/03/30 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
vue.js实现简单轮播图效果
2017/10/10 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
深入理解Python中字典的键的使用
2015/08/19 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
python爬取哈尔滨天气信息
2018/07/14 Python
pytorch 求网络模型参数实例
2019/12/30 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
人力资源专业推荐信
2013/11/29 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
光荣之路观后感
2015/06/12 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书