前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue3.0定时任务显示实时日期相减后时间,vue日期相减天数时分秒

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

作者头像
sunonzj
发布2022-06-21 09:15:50
1.5K0
发布2022-06-21 09:15:50
举报
文章被收录于专栏:zjblogzjblog

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

效果:

image.png
image.png

代码:

代码语言:javascript
复制
<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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-05-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档