uniapp和VUE通用倒计时(文图版)附上了源码

首先是单个的倒计时(vue的话把view换成div,text换成span)

<view class="time">
				<text class="timetext">{{countdownd}}text>
				<text style="margin: 0 5px;"> :text>
				<text class="timetext">{{countdownh}}text>
				<text style="margin: 0 5px;"> :text>
				<text class="timetext">{{countdownm}}text>
				<text style="margin: 0 5px;"> :text>
				<text class="timetext">{{countdowns}}text>
			view>
data() {
			return {
				countdownd: '',
				countdownh: '',
				countdownm: '',
				countdowns: '',
				timer: null, //重复执行
			};
		},
// 时间转换(用于后台返回的时间戳转换)
			formatDate(value) {
				if (value == undefined) {
					return;
				}
				let date = new Date(value * 1000);
				// let date = new Date(value);
				//时间戳为10位需*1000,时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				return y + '-' + MM + '-' + d; //年月日
				// return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; //年月日时分秒
					// 获取后台数据
			init() {
				this.http.post('movie/movie').then(res => {
				//这个是转换后台返回的时间戳
					let times = this.formatDate(res.data.movie.release_time)
					//这个是设置一个定时器
					this.timer = setInterval(() => {
						this.showtime(times)
					})

				})
				//这个是倒计时
			showtime(val) {
				var nowtime = new Date(), //获取当前时间
					endtime = new Date(val); //定义结束时间
				var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
					leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
					lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime /
						(1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd *
						24), //计算小时数
					leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) :
					Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
					lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(
						lefttime / 1000 % 60); //计算秒数
						//这个分别是天,小时,分钟,秒。根据使用场景进行删减
				this.countdownd = leftd
				this.countdownh = lefth - leftd * 24 //返回倒计时的字符串
				this.countdownm = leftm //返回倒计时的字符串
				this.countdowns = lefts //返回倒计时的字符串
				// 倒计时结束时,显示00:00:00
				if (lefttime < 0) {
					this.countdownh = this.countdownm = this.countdowns = "00"
				}
				console.log(this.countdownh);
			},

然后是循环数组的倒计时,用于循环列表渲染

<view class="time">
		<view class="card" v-for="(item,index) in orderData" :key="item.id" @click="jumpOrderDetails(item)">
		<view class="bootems" style="background: #FAA563;">
				倒计时:{{item.countdownm}}分{{item.countdowns}}秒
			view>
			view>
data() {
			return {
				orderData: [],
				timer:''
			}
		},
//获取列表
			getOrderList(order_status) {
				orderList().then(res => {
					this.orderData = res.data.list
					//这个主要是判断在什么情况下运行定时器,可以删掉判断也可以按照你的需求更改判断
					if(res.data.list[0].order_status==5) {
					//给数组里面添加一个转换过的时间
						this.orderData.map(v => {
						//v.end_time是后台返回的结束时间的时间戳
							v.times = this.formatDate(v.end_time)
						})
						//运行定时器
						this.timer = setInterval(()=> {
							this.showtime()
						}, 1000)
					}else {
					//停止定时器
						clearInterval(this.timer)
					}
						
							
				})		
			},
			//倒计时代码
			showtime() {
			//这个主要是用于刷新页面,因为数组定时器有数据不显示的可能
				 this.$forceUpdate();
				 //这个是给数组里面添加倒计时的时间
			 this.orderData.map(v => {
			 	var nowtime = new Date() //获取当前时间
			 	var endtime = new Date(v.times); //定义结束时间
			 	var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
			 		leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
			 		lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math
			 		.floor((lefttime /
			 			(1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) +
			 			leftd *
			 			24), //计算小时数
			 		leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 *
			 			60) % 60) :
			 		Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
			 		lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) :
			 		Math.floor(
			 			lefttime / 1000 % 60); //计算秒数
			 			//这个分别是天,小时,分钟,秒。根据使用场景进行删减
			 	v.countdownd = leftd
			 	v.countdownh = lefth - leftd * 24 //返回倒计时的字符串
			 	v.countdownm = leftm //返回倒计时的字符串
			 	v.countdowns = lefts //返回倒计时的字符串
			 })
			
				console.log(this.orderData);
			},
			// 时间转换
			formatDate(value) {
				if (value == undefined) {
					return;
				}
				let date = new Date(value * 1000);
				// let date = new Date(value);
				//时间戳为10位需*1000,时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				// return y + '-' + MM + '-' + d; //年月日
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; //年月日时分秒
			},

如果此文章对你有帮助。麻烦点个关注,后期会给你们带来更多前端知识

你可能感兴趣的:(uni-app,vue.js,前端)