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

使用场景类似于 订单倒计时,或答题倒计时,代码如下
在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);
	   },
 }

原生js 和上面相差不大,修改相应的参数

猜你喜欢

转载自blog.csdn.net/qq_38188228/article/details/125198890