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

相关文章

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

解决docker目录内存不足扩容处理方案

《解决docker目录内存不足扩容处理方案》文章介绍了Docker存储目录迁移方法:因系统盘空间不足,需将Docker数据迁移到更大磁盘(如/home/docker),通过修改daemon.json配... 目录1、查看服务器所有磁盘的使用情况2、查看docker镜像和容器存储目录的空间大小3、停止dock

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v

5 种使用Python自动化处理PDF的实用方法介绍

《5种使用Python自动化处理PDF的实用方法介绍》自动化处理PDF文件已成为减少重复工作、提升工作效率的重要手段,本文将介绍五种实用方法,从内置工具到专业库,帮助你在Python中实现PDF任务... 目录使用内置库(os、subprocess)调用外部工具使用 PyPDF2 进行基本 PDF 操作使用

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面:本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本:① 语音自选参数,按钮控制语音:② 效果图:二、朗读多条文本:① 语音有默认值:②

vue监听属性watch的用法及使用场景详解

《vue监听属性watch的用法及使用场景详解》watch是vue中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作,:本文主要介绍vue监听属性watch的用法及使用场景... 目录1. 监听属性 watch2. 常规用法3. 监听对象和route变化4. 使用场景附Watch 的

在Node.js中使用.env文件管理环境变量的全过程

《在Node.js中使用.env文件管理环境变量的全过程》Node.js应用程序通常依赖于环境变量来管理敏感信息或配置设置,.env文件已经成为一种流行的本地管理这些变量的方法,本文将探讨.env文件... 目录引言为什么使php用 .env 文件 ?如何在 Node.js 中使用 .env 文件最佳实践引

Vue实现路由守卫的示例代码

《Vue实现路由守卫的示例代码》Vue路由守卫是控制页面导航的钩子函数,主要用于鉴权、数据预加载等场景,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一、概念二、类型三、实战一、概念路由守卫(Navigation Guards)本质上就是 在路

分析 Java Stream 的 peek使用实践与副作用处理方案

《分析JavaStream的peek使用实践与副作用处理方案》StreamAPI的peek操作是中间操作,用于观察元素但不终止流,其副作用风险包括线程安全、顺序混乱及性能问题,合理使用场景有限... 目录一、peek 操作的本质:有状态的中间操作二、副作用的定义与风险场景1. 并行流下的线程安全问题2. 顺

Python异常处理之避免try-except滥用的3个核心原则

《Python异常处理之避免try-except滥用的3个核心原则》在Python开发中,异常处理是保证程序健壮性的关键机制,本文结合真实案例与Python核心机制,提炼出避免异常滥用的三大原则,有需... 目录一、精准打击:只捕获可预见的异常类型1.1 通用异常捕获的陷阱1.2 精准捕获的实践方案1.3