js时间格式转化处理,vue.js时间转化为今天,明天,后天显示

2023-10-21 09:59

本文主要是介绍js时间格式转化处理,vue.js时间转化为今天,明天,后天显示,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前端在日常开发中经常需要对时间进行一系列的处理,比如吧正常时间转化为昨天,今天,明天,后天等方式显示,其余时间显示月份日期,时间等,这时候写一个公共方法来转化,即高效又优雅,话不多说,看代码,注释都在代码里了
在这里插入图片描述
在这里插入图片描述

//后台获取时间列表:
getList() {let project = [{name: "京东当日达",time: "2022-07-04 10:32:16",price: "30.00",},{name: "京东次日达",time: "2022-07-05 11:52:16",price: "26.00",},{name: "京东特快送",time: "2022-07-06 13:30:16",price: "20.00",},{name: "京东超快送",time: "2022-07-08 08:08:16",price: "18.00",},{name: "京东配送",time: "2022-07-12 23:59:16",price: "12.00",}];project.forEach((item) => {item.myTime = this.getTime(item.time);});
},//时间格式进行处理
getTime(strtime) {let date = new Date(strtime.replace(/-/g, "/"));// date 预计送达时间戳date = Date.parse(date); // 转为国际标准时间let time = new Date(parseInt(date)); // 一共相差几天let days = parseInt((date - new Date().getTime()) / 86400000); // 今天是几号let today = new Date().getDate(); let mouth = time.getMonth() + 1;// 预计送达是几号let day = time.getDate(); let hour = time.getHours() < 10 ? "0" + time.getHours() : time.getHours();let min = time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();// offset 送达日期-今天日期差let offset = Math.abs(day - today);let obj = {// 日期date: "",// 具体时间time: hour + ":" + min,};// 这里双重判断,第一个判断days < 3是验证是否在同一个月,第二个offset < 3是判断是验证相差是几天if (days < 3 && offset < 3) {if (offset === 0) {obj.date = "今天";} else if (offset === 1) {obj.date = "明天";} else if (offset === 2) {obj.date = "后天";}} else {obj.date = mouth + "月" + day + "日"}return obj;
},

组件经常用到建议收藏,写的比较简单,有复制业务逻辑扩展起来也方便,觉得有用记得一键三连哈!
在这里插入图片描述

这篇关于js时间格式转化处理,vue.js时间转化为今天,明天,后天显示的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/253643

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

服务器集群同步时间手记

1.时间服务器配置(必须root用户) (1)检查ntp是否安装 [root@node1 桌面]# rpm -qa|grep ntpntp-4.2.6p5-10.el6.centos.x86_64fontpackages-filesystem-1.41-1.1.el6.noarchntpdate-4.2.6p5-10.el6.centos.x86_64 (2)修改ntp配置文件 [r

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始,按照书籍的划分,第10章开始就进入保护模式(Protected Mode)部分了,感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断(Interrupt)的设计,中断的几种方式:外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用: 为了更好的利用处理器的性能。协同快速和慢速设备一起工作

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

安卓链接正常显示,ios#符被转义%23导致链接访问404

原因分析: url中含有特殊字符 中文未编码 都有可能导致URL转换失败,所以需要对url编码处理  如下: guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时,会被误伤转义为%23,导致链接无法访问

usaco 1.2 Palindromic Squares(进制转化)

考察进制转化 注意一些细节就可以了 直接上代码: /*ID: who jayLANG: C++TASK: palsquare*/#include<stdio.h>int x[20],xlen,y[20],ylen,B;void change(int n){int m;m=n;xlen=0;while(m){x[++xlen]=m%B;m/=B;}m=n*n;ylen=0;whi

usaco 1.2 Name That Number(数字字母转化)

巧妙的利用code[b[0]-'A'] 将字符ABC...Z转换为数字 需要注意的是重新开一个数组 c [ ] 存储字符串 应人为的在末尾附上 ‘ \ 0 ’ 详见代码: /*ID: who jayLANG: C++TASK: namenum*/#include<stdio.h>#include<string.h>int main(){FILE *fin = fopen (