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）

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

猜你喜欢