首页 > 其他分享 >时间戳转换vue

时间戳转换vue

时间:2024-04-08 18:30:21浏览次数:20  
标签:vue 转换 padStart 60 时间 diff 1000 any const

1.格式化时间 

<p>{{formattedTime('1712054698000')}}</p>

const formattedTime = (time: any) => {

    const date = new Date(time)

    const year = date.getFullYear()

    const month = String(date.getMonth() + 1).padStart(2, '0')

    const day = String(date.getDate()).padStart(2, '0')

    const hours = String(date.getHours()).padStart(2, '0')

    const minutes = String(date.getMinutes()).padStart(2, '0')

    const seconds = String(date.getSeconds()).padStart(2, '0')

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`

}
2.获取开始时间和结束时间中间的时长
<p>{{setTime('1712052379000','1712053006000')}}</p>
const getTime = (startTime: any, endTime: any) => {
	const start: any = new Date(startTime)
	const end: any = new Date(endTime)
	let diff: any = end - start

    //年
    const years = Math.floor(diff / (1000 * 60 * 60 * 24 * 365.25)).toString().padStart(2, '0');  
    diff %= 1000 * 60 * 60 * 24 * 365.25;  
    //月
    const months = Math.floor(diff / (1000 * 60 * 60 * 24 * 30)).toString().padStart(2, '0');  
    diff %= 1000 * 60 * 60 * 24 * 30;  
    //日
    const days = Math.floor(diff / (1000 * 60 * 60 * 24)).toString().padStart(2, '0');  
    diff %= 1000 * 60 * 60 * 24;  
    //时
	const hours: any = Math.floor(diff / (1000 * 60 * 60)).toString().padStart(2, '0')
	diff %= 1000 * 60 * 60
    //分
	const minutes: any = Math.floor(diff / (1000 * 60)).toString().padStart(2, '0')
	diff %= 1000 * 60
    //秒
	const seconds: any = Math.floor(diff / 1000).toString().padStart(2, '0')

	return `${years}:${months}:${days} ${hours}:${minutes}:${seconds}`
}

//.toString().padStart(2, '0')转换为字符串补零

3.获取n小时以后的时间

//value是要加多少个小时
const addHours = (value:any) => {
	const time: any = value
	const newDate = new Date(time.replace(/-/g, '/'))
	newDate.setHours(newDate.getHours() + n)
	return newDate
}

标签:vue,转换,padStart,60,时间,diff,1000,any,const
From: https://blog.csdn.net/2201_75763401/article/details/137518857

相关文章

  • Linux应用开发(3):Linux时间操作(time、mktime、localtime等)
    1.简述        在Linux系统中,时间操作函数是编程中经常使用的一部分,它们允许程序获取和设置系统时间,以及对时间进行各种处理。以下是一些常用的时间操作函数的详细介绍。2.时间操作(1)time():获取1970年1月1日以来的总的秒计数        time()函数是时间......
  • 02_使用Vite搭建Vue3项目
    首先插件添加:LiveServer、Vue-Official、VueVSCodeSnippets、别名路径跳转官网:Vite|下一代的前端工具链(vitejs.dev)1.创建一个文件夹VueApp,运行cmd转到该目录下,执行命令:npmcreatevite@latest2.然后转到vuedemo目录下命令:cdvuedemo,3.执行命令:npminstall。文件夹......
  • 冰球大莽斗上线时间+配置介绍+联机加速器推荐
    冰球大莽斗是一款Firestoke发行,RageCureGames开发的多人欢乐体育竞技游戏,玩家可以选择射手、莽卫或者边锋三个不同职业,体验丰富有趣的冰球运动。上线时间本作将于4月11日登陆steam平台,目前游戏已上架steam商店页面,搜索“冰球大莽斗”即可找到该游戏。配置介绍根据官方......
  • Vue2中使用iframe展示文件流(PDF)以及blob类型接口错误展示返回值
    需求使用iframe展示后端接口传输来的文件流(pdf),如果接口返回错误则弹出提示html部分<iframe:src="url"width="100%"/>接口部分//接口封装已忽略,注意:如需接口接收文件流,请在请求中加入responseType:'blob'以及type:"application/json;chartset=UTF-8"function......
  • crontab 时间详细
    crontab每分钟定时执行:*/1****servicemysqldrestart//每隔1分钟执行一次*/10****servicemysqldrestart//每隔10分钟执行一次crontab每小时定时执行:0*/1***servicemysqldrestart//每1小时执行一次0*/2***servicemysqldrestart//每2小时执行一......
  • 前端【VUE】09-vue【Eslint】
    一、ESLint在vscode插件中搜索ESLint,https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 什么是ESLint官方概念:ESLint是可组装的JavaScript和JSX检查工具。通俗理解:一个工具,用来约束团队成员的代码风格。当通过@vue......
  • 电影特效渲染为什么费时间?「瑞云渲染」
    影视特效渲染过程通常耗时且资源密集,因为它涉及处理复杂的视觉元素和光影效果。瑞云渲染通过云技术提供解决方案,加快渲染速度并降低成本。简而言之,电影特效渲染之所以费时,是因为其对计算机资源的高需求。电影特效渲染费时间原因电影特效渲染费时的原因是多方面的,既包括技术层面......
  • 干货教程【软件篇】| PDF转换word工具永久免费使用
    给大家分享一个好用的PDF转换word的工具,完全免费、离线使用、且保存下来永久好用的工具。ps:本文只做好用的工具分享,不涉及任何工具的开发,感谢工具的开发者!关注文章下方公众号回复关键词【ptow】即可免费获取本工具。大家下载好之后就会进入安装界面,安装过程十分顺畅这里......
  • Vue.nextTick() 使用场景及实现原理
    Vue.nextTick()基本使用作用:等待下一次DOM更新刷新的工具方法。为什么需要用到Vue.nextTick()?当你在Vue中更改响应式状态时,最终的DOM更新并不是同步生效的,而是由Vue将它们缓存在一个队列中,直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少......
  • Vue3 · 小白学习全局 API:常规
    全局API:常规本次笔记versionnextTick()defineComponent()defineAsyncComponent()defineCustomElement()1.version暴露当前所使用的Vue版本。类型string示例import{version}from'vue'console.log(version)2.nextTick()等待下一次DOM更新刷新的工具......