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

Posted 2021-07-06 JackieDYH

效果 

方法

// 倒计时事件 秒
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;
    // 返回值
    if (format == "dayHH:MM:SS") {
        return `${day}day ${hr}:${min}:${sec}`;
    }
}

页面中使用

// 倒计时处理
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);
},