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

效果 

方法-倒计时

// 倒计时事件 秒
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函数，使用原数组数据进行定时器操作，调用处理函数，将处理结果回填到原数组中新属性上保持，在页面上实现新属性展示

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

---

效果

 方法-运行时长

/**
 * 获取运行时间
 * @param {number} startTime - 开始时间戳
 */
const displayRuntime = (startTime) => {
  const now = Date.now(); // 当前时间戳
  let runtime = now - startTime; // 运行时长，单位为毫秒

  const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
  const oneHour = 60 * 60 * 1000; // 一小时的毫秒数
  const oneMinute = 60 * 1000; // 一分钟的毫秒数

  // 计算天数
  let days = Math.floor(runtime / oneDay)
    .toString()
    .padStart(2, '0');
  runtime = runtime % oneDay;

  // 计算小时数
  let hours = Math.floor(runtime / oneHour)
    .toString()
    .padStart(2, '0');
  runtime = runtime % oneHour;

  // 计算分钟数
  let minutes = Math.floor(runtime / oneMinute)
    .toString()
    .padStart(2, '0');
  runtime = runtime % oneMinute;

  // 计算秒数
  let seconds = Math.floor(runtime / 1000)
    .toString()
    .padStart(2, '0');

  //   console.log(`运行时长 ${days}日 ${hours}时 ${minutes}分 ${seconds}秒`);
  return `运行时长 ${days}日 ${hours}时 ${minutes}分 ${seconds}秒`;
};

页面中使用

<div class="grid-body-right-content" v-if="true">
  <div
    class="grid-body-right-content-item"
    v-for="item in currentGs"
    :key="item.id"
  >
    <div class="content-item-left">
     
        <span class="item-left-bottom-span">
          <!-- 运行时长 20日 23小时 15分 32秒 -->
          {{ item.TIME }}
        </span>
    </div>
  </div>
</div>

 逻辑代码

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';

let IntervalTime = ref(null);
// 模拟数据
const currentGs = ref([
  {
    id: 1,
    createTime: 1691994296457
  },
  {
    id: 2,
    createTime: 1691994226457
  },
  {
    id: 3,
    createTime: 1691994296457
  }
]);

const getTimeCurrentGs = () => {
  clearInterval(IntervalTime.value);
  IntervalTime.value = setInterval(() => {
    currentGs.value.forEach((item) => {
      item.TIME = displayRuntime(item.createTime);
    });
  }, 1000);
};

onMounted(() => {
  getTimeCurrentGs();
});
onUnmounted(() => {
  clearInterval(IntervalTime.value);
});

/**
 * 获取运行时间
 * @param {number} startTime - 开始时间戳
 */
const displayRuntime = (startTime) => {
  const now = Date.now(); // 当前时间戳
  let runtime = now - startTime; // 运行时长，单位为毫秒

  const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
  const oneHour = 60 * 60 * 1000; // 一小时的毫秒数
  const oneMinute = 60 * 1000; // 一分钟的毫秒数

  // 计算天数
  let days = Math.floor(runtime / oneDay)
    .toString()
    .padStart(2, '0');
  runtime = runtime % oneDay;

  // 计算小时数
  let hours = Math.floor(runtime / oneHour)
    .toString()
    .padStart(2, '0');
  runtime = runtime % oneHour;

  // 计算分钟数
  let minutes = Math.floor(runtime / oneMinute)
    .toString()
    .padStart(2, '0');
  runtime = runtime % oneMinute;

  // 计算秒数
  let seconds = Math.floor(runtime / 1000)
    .toString()
    .padStart(2, '0');

  //   console.log(`运行时长 ${days}日 ${hours}时 ${minutes}分 ${seconds}秒`);
  return `运行时长 ${days}日 ${hours}时 ${minutes}分 ${seconds}秒`;
};
</script>