生活不易、且行且珍惜。网站首页 程序人生

Vue3.0定时任务显示实时日期相减后时间，vue日期相减天数时分秒

发布时间：2022-05-19 10:55编辑：zj 阅读：文章分类： 网站互动QQ群：170915747

需求概述：就是两个日期相减，把得到的天时分秒显示在页面中并实时更新时间走动。

效果：



代码：

<template>

<h2><span>世界上最甜的崽</span>小甜崽</h2>
  <p>网站：ltBlog</p>
  <p>邮箱：sunonzj128@qq.com</p>
  <p>已运行：{{blogRunTime}}</p>
  <img src="../assets/blog/images/wx.png" alt="微信"> </div>
<div class="isgood_news">
</template> 

<script>
import {ref,onMounted,onDeactivated} from "vue";

export default {
    name: "index",
    setup() {

      const timer = ref(0)
      const blogRunTime = ref()
      onMounted(()=>{ //组件挂载时的生命周期执行的方法
        timer.value = window.setInterval(function logname() {
          let staytimeGap = new Date().getTime() - new Date('2022-05-12 12:00:00').getTime();
          let stayDay = Math.floor(staytimeGap/(3600*1000*24));
          let leave =  staytimeGap%(3600*1000*24);
          let stayHour = Math.floor(leave/(3600*1000));
          let leave1 = leave%(3600*1000);
          let stayMin = Math.floor(leave1/(60*1000));
          let leave2 = leave1%(60*1000);
          let staySec = Math.floor(leave2/1000);
          blogRunTime.value = stayDay + "天" +stayHour + "时" + stayMin + "分" + staySec + "秒";
        }, 1000);
      })
      onDeactivated(()=>{ //离开当前组件的生命周期执行的方法
        window.clearInterval(timer.value);
      })

      return {
        blogRunTime
      };
    },
};
</script>

#去评论一下