定时器改变图片位置

<template>
	<view class="content">
		<image class="logo" :style="{left: left + 'px'}" style="position: relative;" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{nums}}</text>
			<text></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				left:0,
				nums:'',
				theElapsedTime:1000,
				time:''
				
			}
		},
		onLoad() {
			
			
			// 思路:
			// 1. 把时间转换为时间戳,开始时间与结束时间相减,得到需要的时间戳，开始进行倒计时;
			// (new Date(time)).getTime() / 1000
			
			// 2. 宽度与时间戳相除, 得到每次倒计时 +多少px;
			
			// 3. 每次倒计时完成, 初始化时间重新倒计时, 旗子位置清0, 重新开始;
			
			// 4. 每次旗子到达指定的位置, 旗子将不再移动, 倒计时继续执行;

			var my_self = this;
			var hour, minute, second; /*时 分 秒*/
			hour = minute = second = 0; //初始化
			var millisecond = 0; //毫秒
			this.timer = setInterval(() => {
				millisecond = millisecond + 1000;
				if (millisecond >= 1000) {
					millisecond = 0;
					second = second + 1;
				}
				if (second >= 60) {
					second = 0;
					minute = minute + 1;
				}
 
				if (minute >= 60) {
					minute = 0;
					hour = hour + 1;
				}
				my_self.nums = hour+'时'+minute+'分'+second+'秒';
				this.left += 0.5
				if(this.left == 50){
					this.left = 0;
					clearInterval(this.timer); // 结束定时器
					this.timer = '';
				}
			}, this.theElapsedTime);
		},
		methods: {
			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>



<!-- <template>

	<view>{{countdown}}</view>

</template>

<script>
	export default {
		data() {
			return{
				h: 23,//时
				m: 59, //分
				s: 59, //秒
				countdown: '24:00:00', //倒计时
				timer: null //重复执行
			}
			
		},
		onLoad() {
			this.timer = setInterval(() => {
				this.timeCount()
			}, 1000)
		},

		methods: {
			timeCount() {
				--this.s;
				if (this.s < 0) {
					--this.m;
					this.s = 59;
				}
				if (this.m < 0) {
					--this.h;
					this.m = 59
				}
				if (this.h < 0) {
					this.s = 0;
					this.m = 0;
				}
				
				this.countdown = this.h + ":" + this.m + ":" + this.s
			},
		}

	};
</script> -->