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; //年月日时分秒
			},

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值