原生js 或vue实现60分钟倒计时案例

热爱sunny

于 2022-06-09 10:45:29 发布

阅读量738

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_38188228/article/details/125198890

版权

使用场景类似于订单倒计时,或答题倒计时,代码如下
在Vue中封装了如下的方法

data () {
    return {
        countdownTxt:'',//要显示的倒计时文案
    };
  },
// 定义一个方法 方便调用
methods: {
// @diffTime 传入秒数
	countdownFun(diffTime) {
	   if (diffTime > 0) {
	       this.countdownTime = setInterval(() => {
	       let diffM =
	           Math.floor(diffTime / 60) > 9
	           ? Math.floor(diffTime / 60)
	           : `0${Math.floor(diffTime / 60)}`;
	       let diffS =
	           Math.floor(diffTime % 60) > 9
	           ? Math.floor(diffTime % 60)
	           : `0${Math.floor(diffTime % 60)}`;
	       this.countdownTxt = `${diffM}分${diffS}秒`;
	       // console.log(this.countdownTxt,'qqqqqwwwwwwwww')
	       diffTime--;
	       if (diffTime < 0) {
	           clearInterval(this.countdownTime);
	           return;
	       }
	       }, 1000);
	   },
 }