Vue页面上使用多个倒计时展示效果-实现案例

系统管理员 2022-10-11 12:26 260阅读 0赞

# 效果  #

![20210630183203729.gif][]

# 方法 #

// 倒计时事件 秒
    const getcountDown = (value, nowTime, format) => {
        // let nowTime = (new Date().getTime()) / 1000; // 当前时间 秒
        value = Number(value);
        if (value == 0 || value == "" || !value || value <= nowTime) {
            return "-";
        }
        if (isNaN(value)) {
            return "";
        }
        // value--; //自行选择哪里减一
        let timediff = Math.round(value - nowTime); //获取时间差
        let day = parseInt(timediff / 60 / 60 / 24);
        let hr = parseInt(timediff / 60 / 60 % 24);
        let min = parseInt(timediff / 60 % 60);
        let sec = parseInt(timediff % 60);
    
        day = day > 9 ? day : '0' + day;
        hr = hr > 9 ? hr : '0' + hr;
        min = min > 9 ? min : '0' + min;
        sec = sec > 9 ? sec : '0' + sec;
        // 返回值
        switch (format) {
            case "dayHH:MM:SS":
                return `${day}day ${hr}:${min}:${sec}`;
                break;
            default:
                return {day,hr,min,sec};
                break;
        }
    }

## 页面中使用 ##

// 倒计时处理
    countDown() {
      let nowTime = (new Date().getTime()) / 1000; // 当前时间 秒 节省资源消耗
      this.IntervalTime = setInterval(() => {
    	this.poolList.forEach((item, index) => {
    	  let endTime = Number(item.endTime);
    	  if (endTime <= 0) return;
    	  item.time = this.$utils.getcountDown(item.endTime, nowTime,"dayHH:MM:SS");
    	  item.endTime = endTime - 1;
    	});
      }, 1000);
    },
    
    ----------
    // 销毁
    destroyed() {
        clearInterval(this.IntervalTime);
    },

[20210630183203729.gif]: /images/20221005/f690c9c7a27c441fad7ca377d3401999.png