Vue毫秒计时器（开始计时）

最新推荐文章于 2024-06-25 11:59:53 发布

Flowerspleased

最新推荐文章于 2024-06-25 11:59:53 发布

阅读量870

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Flowerspleased/article/details/125872063

版权

话不多说，直接上代码即可

<template>
	<view class="content">
		<button @click="start">开始</button>
		<view class="">
			{{time_filter?time_filter:''}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time_num: 0
			}
		},
		onLoad(option) {

		},
		computed: {
			// 定时器拆分
			time_filter() {
				// var time_num = this.time_num * 50;
				var time_num = this.time_num * 50
				let hour = Math.floor(time_num / 1000 / 60 / 60) < 10 ? '0' + Math.floor(time_num / 1000 / 60 / 60) : Math
					.floor(time_num / 1000 / 60 / 60)
				let minute = Math.floor(time_num / 1000 / 60 % 60) < 10 ? '0' + Math.floor(time_num / 1000 / 60 % 60) :
					Math.floor(time_num / 1000 / 60 % 60);
				let second = Math.floor(time_num / 1000 % 60) < 10 ? '0' + Math.floor(time_num / 1000 % 60) : Math.floor(
					time_num / 1000 % 60);
				let m_second = (time_num % 1000).toString().slice(0, 2)
				let str = (hour == '00' ? '' : hour + 'h' + " ") + (minute == '00' ? '' : minute + 'min' + " ") + second +
					"." +
					m_second + 's'
					console.log(str);
				return str
			}
		},
		methods: {
			// 定时器
			start() {
				this.timer = setInterval(_ => {
					this.time_num += 1
				}, 50)
			},
		}
	}
</script>

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

</style>

效果图以50毫秒累加