vue获取当前日期并将日期格式转化为日期字符串,计算两个时间相差

在vue项目开发中,常常需要实现获取当前的时间,而new Date() 方法获取到的是日期格式并不符合我们实际开发过程中需要的,这个时候我们需要将new Date()获取到的日期格式转化成字符串格式以下通过两种方法实现

首先:在使用new Date()时可以通过传递参数或者不传参两种方法,不传参获取到的是当前时间,传递参数常常使用在计算两个日期的时间差

console.log(new Date()) //Wed Sep 06 2023 16:07:56 GMT+0800 (中国标准时间)
console.log(new Date('2023-12-5 18:00:00'))//Tue Dec 05 2023 18:00:00 GMT+0800 (中国标准时间)

一、获取当前时间转化为字符串格式

①使用new Date()

onLoad() {
			let a = this.timeFormat()
			console.log(a) //2023-09-06 14:52:00
		},
methods: {
	timeFormat() {
	    let dateTime = new Date()
	    // 获取年份
	    let Y = dateTime.getFullYear() + '-'
		//获取当前年的月份 月份要 + 1 (0代表1月)date.getMonth() + 1
		let M = dateTime.getMonth() + 1 < 10 ? '0' + (dateTime.getMonth() + 1) + '-' : (dateTime.getMonth() + 1) +'-'
		//获取当前日(1 - 31)
		let D = dateTime.getDate() < 10 ? '0' + (dateTime.getDate()) + ' ' : (dateTime.getDate()) + ' '
		//获取当前小时(0-23)
		let h = dateTime.getHours() < 10 ? ('0' + dateTime.getHours() + ':') : (dateTime.getHours() + ':');
		//获取当前分钟(0-59)
		let m = dateTime.getMinutes() < 10 ? ('0' + dateTime.getMinutes() + ':') : (dateTime.getMinutes() + ':');
		//获取当前秒数(0-59)
		let s = dateTime.getSeconds() < 10 ? ('0' + dateTime.getSeconds()) : dateTime.getSeconds();
				return (Y + M + D + h + m + s)
			},

		}

②、时间戳转化日期格式

在功能实现前,列举一下日期转时间戳的几种方法

let dateTime = Date.parse(new Date()); // 结果:1570517275000   不推荐 
let dateTime = (new Date()).valueOf(); // 结果: 1570517275069  推荐	
let dateTime = new Date().getTime(); // 结果:1570517275069  推荐

实现方法同①中的一样,只需要将下面这句话替换上面的let dateTime = new Date()

let dateTime = new Date(1628243435000)

二、计算时间差

实现原理:通过将两个时间转为时间戳,相减后得到的值为时间戳的差值,通过一下代码就可以实现获取两个时间的时间差

onLoad() {
			let a = this.timeFormat()
			console.log(a) //760天23时43分24秒
		},
		methods: {
			timeFormat() {
				let dateTime = 1628243435000
				let dateTime1 = new Date().getTime()
				// Math.floor()向下取整 时间戳获取到的是ms,ms和s之间为1000倍,一年360天,一天24小时,一小时60分钟,一分钟60秒

				let dateTime3 = dateTime1 - dateTime;
				let days = Math.floor(dateTime3 / (24 * 3600 * 1000))

				let leave1 = dateTime3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
				let hours = Math.floor(leave1 / (3600 * 1000))

				let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
				let minutes = Math.floor(leave2 / (60 * 1000))

				let leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
				let seconds = Math.round(leave3 / 1000)

				return (days + '天' + hours + '时' + minutes + '分' + seconds + '秒')
			},
		}

付:以下代码根据简单的做个记录,有需要的话自行取用,以下为new Date()对象常用的API

var myDate = new Date();  
myDate.getYear();  //获取当前年份  

myDate.getFullYear(); //获取完整的年份(4位,1970-????)  

myDate.getMonth(); //获取当前月份(0-11,0代表1月)     
// 所以获取当前月份是 myDate.getMonth()+1;   

myDate.getDate(); //获取当前日(1-31)  

myDate.getDay(); //获取当前星期X(0-6,0代表星期天)  

myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)  

myDate.getHours(); //获取当前小时数(0-23)  

myDate.getMinutes(); //获取当前分钟数(0-59)  

myDate.getSeconds(); //获取当前秒数(0-59)  

myDate.getMilliseconds(); //获取当前毫秒数(0-999)  

myDate.toLocaleDateString(); //获取当前日期 (如:2021/4/13)
    
myDate.toLocaleTimeString(); //获取当前时间  (如:下午2:42:45)   

myDate.toLocaleString( ); //获取日期与时间   (如:2021/4/13下午2:43:23) 

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以使用 JavaScript 中的 Date 对象来处理日期时间,然后使用 Vue 中的模板语法将其转换成指定的日期字符串。下面是一个简单的示例: ```html <template> <div> <p>当前时间:{{ currentTime }}</p> <p>格式化后的时间:{{ formattedTime }}</p> </div> </template> <script> export default { data() { return { currentTime: new Date(), dateFormat: "yyyy年MM月dd日 HH:mm:ss", }; }, computed: { formattedTime() { return this.formatDate(this.currentTime, this.dateFormat); }, }, methods: { formatDate(date, format) { const o = { "M+": date.getMonth() + 1, // month "d+": date.getDate(), // day "H+": date.getHours(), // hour "m+": date.getMinutes(), // minute "s+": date.getSeconds(), // second "q+": Math.floor((date.getMonth() + 3) / 3), // quarter S: date.getMilliseconds(), // millisecond }; if (/(y+)/.test(format)) format = format.replace( RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length) ); for (const k in o) if (new RegExp("(" + k + ")").test(format)) format = format.replace( RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length) ); return format; }, }, }; </script> ``` 在上面的代码中,我们定义了一个 `currentTime` 数据属性来存储当前时间,以及一个 `dateFormat` 数据属性来指定日期格式。然后,我们使用一个计算属性 `formattedTime` 来格式时间并将其显示在模板中。我们还定义了一个 `formatDate` 方法来将时间对象转换为指定格式日期字符串。 在模板中,我们使用双花括号语法来显示当前时间格式化后的时间。 你可以根据自己的需求修改日期格式和显示方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值