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

星星~笑笑

已于 2023-07-20 08:18:33 修改

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： uni-app 前端 javascript

于 2023-07-19 18:04:19 首次发布

本文链接：https://blog.csdn.net/u014724048/article/details/131793205

该文章介绍了如何在Vue项目中使用uViewUI库创建一个自定义倒计时组件。组件通过接收结束时间并转换为时间戳来计算剩余时间，同时提供了事件监听功能，例如在倒计时结束时触发父组件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考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
}

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

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