vue小时倒计时

周同学_web

已于 2023-04-06 11:11:17 修改

阅读量227

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2023-04-06 10:16:34 首次发布

本文链接：https://blog.youkuaiyun.com/zhouhouyong_web/article/details/129983362

该代码段展示了如何在Vue.js应用中从后台获取数据并进行倒计时处理。通过`getExamTime`方法获取后台返回的毫秒数，然后使用`setInterval`进行每秒更新，将剩余时间转换为小时、分钟和秒并在页面上显示。当倒计时结束时，会自动清除计时器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="titme">{{groupHour}}</div>

data(){
	return{
		groupTime:'',//后台返回数据
	 	groupHour:'',//页面显示数据
	}
},
methods: {
	getExamTime(){
		this.groupTime = 21000 //后台返回数据
		this.hours = setInterval(() => {
			if (this.groupTime === 0) {
				clearInterval(this.hours) // 倒计时结束清除计时器
			} else {
				this.groupTime-=1;
				this.groupMout();
			}
		}, 1000)
	},
	groupMout(){
      let h = parseInt((this.groupTime / (60 * 60)) % 24);
      h = h < 10 ? "0" + h : h;
      let m = parseInt((this.groupTime / 60) % 60);
      m = m < 10 ? "0" + m : m;
      let s = parseInt(this.groupTime % 60);
      s = s < 10 ? "0" + s : s;
      this.groupHour = h + ":" + m + ":" + s;//页面展示数据
    }
}