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

最新推荐文章于 2024-09-23 09:59:57 发布

sunon_

最新推荐文章于 2024-09-23 09:59:57 发布

阅读量1.6k

点赞数 1

分类专栏：网站 VUE 前端文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/sunon_/article/details/124858688

版权

网站同时被 3 个专栏收录

23 篇文章 2 订阅

订阅专栏

VUE

19 篇文章 3 订阅

订阅专栏

前端

14 篇文章 0 订阅

订阅专栏

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

效果：

代码：

<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>

在博客中查看：Vue3.0定时任务显示实时日期相减后时间，vue日期相减天数时分秒 - ZJBLOG