vue3-列表中-根据起始日期-同时实现正计时和倒计时

<template>
 <button @click="tootherpage">跳转其他页面销毁定时器</button>
 <el-table :data="tableData.data" style="width: 100%">
    <el-table-column prop="starttime" label="开始时间"  />
    <el-table-column prop="startnow" label="距离开始时间"  />
    <el-table-column prop="endtime" label="结束时间" />
    <el-table-column prop="endnow" label="距离结束时间" />
  </el-table>
</template>
 
<script setup>
    import {onBeforeUnmount, ref, shallowRef, onMounted,reactive} from 'vue'
    import {useRoute,useRouter} from 'vue-router'
 
    import { ElMessage, ElMessageBox ,UploadProps, UploadUserFile} from 'element-plus'

    //获取路由参数
    const route = useRoute()
    //路由跳转
    const router = useRouter()

    //定时器数组
    const dsq = reactive({
      data:[]
    })

    onMounted(()=>{
      console.log('完成')

      //循环列表数据
      for(var x = 0;x<tableData.data.length;x++){
        console.log(tableData.data[x].starttime)
        var t = setInterval((x)=>{
          // vue3是响应式数据，废除了$set方法
          tableData.data[x].startnow = getTime(alldifftype(tableData.data[x].starttime))
          tableData.data[x].endnow = getTime(alldifftype(tableData.data[x].endtime))
        },1000,x)
        dsq.data.push(t)
      }
    
    })

    onBeforeUnmount(()=>{
      console.log('销毁')
      console.log(dsq.data)
      for(var x = 0;x<dsq.data.length;x++){
        clearInterval(dsq.data[x])
      }
      dsq.data = []
      console.log(dsq.data)
    })

    //模拟数据
    const tableData = reactive({
      data:[
        {
          'starttime':'2024-04-07 16:00:00',
          'endtime':'2024-04-08 12:00:00',
        },
        {
          'starttime':'2024-04-01 12:00:00',
          'endtime':'2025-04-08 12:00:00',
        }
      ]
    })

   
    //跳转到其他页面
    const tootherpage = ()=>{
      router.push({path:'/fuwenben'})
    }
    
    //相差时间
    const alldifftype = (time)=>{
      let startTime = new Date(time); // 开始时间
      let endTime = new Date(); // 结束时间
      // console.log(endTime - startTime)



      //通过Math.abs绝对值，无需判断日期谁大谁小，实现从倒计时到正计时无缝切换
      var ss = Math.abs(Math.floor((endTime - startTime) / 1000))
      var mm = Math.abs(Math.floor((endTime - startTime) / 1000 / 60))
      var hh = Math.abs(Math.floor((endTime - startTime) / 1000 / 60 / 60))
      var dd = Math.abs(Math.floor((endTime - startTime) / 1000 / 60 / 60 / 24))
 
      // console.log(ss); // 秒数
      // console.log(mm); // 分钟
      // console.log(hh); // 小时
      // console.log(dd); // 天数
      
 
      return ss
    }

    // 秒转时分秒
    const getTime = (value)=> {
     
      let secondTime = parseInt(value); // 秒
      let minuteTime = 0; // 分
      let hourTime = 0; // 时
      if (secondTime > 60) {
        //如果秒数大于60，将秒数转换成整数
        //获取分钟，除以60取整，得到整数分钟
        minuteTime = parseInt(secondTime / 60);
        //获取秒数，秒数取余，得到整数秒数
        secondTime = parseInt(secondTime % 60);
        //如果分钟大于60，将分钟转换成小时
        if (minuteTime > 60) {
          //获取小时，获取分钟除以60，得到整数小时
          hourTime = parseInt(minuteTime / 60);
          //获取小时后取余的分，获取分钟除以60取余的分
          minuteTime = parseInt(minuteTime % 60);
        }
      }
      //若秒数是个位数，前面用0补齐
      secondTime = secondTime < 10 ? "0" + secondTime : secondTime;
      var result = "" + secondTime + "";
      if (minuteTime > 0) {
        //若分钟数是个位数，前面用0补齐
        minuteTime = minuteTime < 10 ? "0" + minuteTime : minuteTime;
        result = "" + minuteTime + ":" + result;
      } else {
        //若分钟数为0，用"00"表示
        result = "" + "00" + ":" + result;
      }
    
      if (hourTime > 0) {
        //若小时数是个位数，前面用0补齐
        hourTime = hourTime < 10 ? "0" + hourTime : hourTime;
        result = "" + hourTime + ":" + result;
      } else {
        //若小时数为0，用"00"表示
        result = "" + "00" + ":" + result;
      }
     
      return result;
    }

    
   
</script>

<style scoped>

</style>