vue 倒计时

html代码 

<template>
    <view class="pay-time">
		<view class="title">
			支付时间
		</view>
		<view class="times">
			{
   
   {count}}
		</view>
	</view>
</template>

JavaScript代码

<script>
	export default {
	    data() {
			return {
				count: '', //倒计时
				seconds: 181 // 3分钟的秒数
			}
		},
		mounted() {
		   this.Time() //调用定时器
		},
		methods: {
			// 分 秒 格式化函数
			countDown() {
				if(this.seconds >=0){
                     // let d = parseInt(this.seconds / (24 * 60 * 60))
                     // d = d < 10 ? "0" + d : d
                     // let h = parseInt(this.seconds / (60 * 60) % 24);
                     // h = h < 10 ? "0" + h : h
			            let m = parseInt(this.seconds / 60 % 60);
			            m = m < 10 ? "0" + m : m
			            let s = parseInt(this.seconds % 60);
			            s = s < 10 ? "0" + s : s
			            this.count ='00:' + m + ':' + s
				}else{
						// 当seconds<0时,清除定时器
                        clearInterval(Time())
					}
			},
			//定时器每过1秒参数减1
			Time() {
			    setInterval(() => {
			         this.seconds -= 1
			         this.countDown()
			    }, 1000)
			}
</script>

 效果图

猜你喜欢

转载自blog.csdn.net/m0_59735348/article/details/127518917