uniapp u-view 两个时间戳的差 倒计时

参考uView倒计时

1、常规操作:自定义倒计时组件 ui-count-down

<template>
	<view class="countdown-view">
		<u-count-down @change="finishDown" :time="startTimeDown" :startTime="startTime" format="HH:mm:ss">
		</u-count-down>
	</view>
</template>
<script>
export default {
		props: {
			startTime: {
				type: [Number, String],
				default: 0,
			},
		},
		data() {
			return {
				startTimeDown: '' //倒计时时间戳
			}
		},
		mounted() {
			this.intervalTime(this.startTime)
		},
		methods: {
			//日期转时间戳
			timeProcessing(timeDate) {
				// let timeDate = "2019-06-24 11:08:48"
				let Time = new Date(timeDate);
				// console.log(Time) //Mon Jun 24 2019 11:08:48 GMT+0800 (中国标准时间)
				let timestemp = Time.getTime();
				return timestemp
			},
			//获取时间差
			intervalTime(endTime) {
				// var timestamp=new Date().getTime(); //计算当前时间戳
				var date1 = (Date.parse(new Date())) / 1000; //计算当前时间戳 (毫秒级)
				var date2 = (this.timeProcessing(endTime)) / 1000; //1688817600; //计算当前时间戳 (毫秒级)
				// var date2 = endTime; //结束时间
				// var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
				var date3 = (date2 - date1) * 1000; //时间差的毫秒数
				this.startTimeDown = date3
                //触发当前组件上的 事件,让父类能够监听到
				this.$emit('countDownTime', date3)
				return
			},
		}
	}
</script>
<style lang="scss">
	.countdown-view {
		margin-left: 10rpx;
	}
</style>

2、引用自定义组件

<ui-count-down @finishDown="finishDown(index)" :startTime="2023-07-17 18:02:00">
</ui-count-down>

@finishDown:让父类监听引用组件倒计时的相关操作

//倒计时结束
finishDown(index) {
	//0:未开播 1:待开播 2:直播中 3:直播结束
	this.liveList[index].status = 2
}

猜你喜欢

转载自blog.csdn.net/u014724048/article/details/131793205