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

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

效果：

代码：

<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

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

vue3.0引入ant-design-vue报错 export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue‘
vue3.0引入ant-design-vue报错 export 'default' (imported as 'Vue') was not found in 'vue' 报错如下解决办法根目录命令 ...
mysql日期减后取月_mysql加减时间-函数-时间加减
select timediff('23:40:00', ' 18:30:00'); -- 两时间相减 SELECT substring( timediff('23:40:00', ' 18:30:00 ...
convert.todatetime指定日期格式_MATLAB的时间与日期
7 日期和时间 MATLAB在2014b版本中将日期和时间独立成了一个数据类型,新的版本中对于时间数据的处理功能更为强大.比如datetime和duration等函数,可以支持对时间的高效计算.对比 ...
date日期格式化 java_Java关于时间和日期格式化的方法
SimpleDateFormat这个类来解决我们的时间格式问题. SimpleDateFormat 是一个以与语言环境相关的方式来格式化和分析日期的具体类.它允许进行格式化(日期 -> 文本). ...
JavaScript中的内置对象-8--4.date对象中-获取,设置日期时间的方法; 获取,设置年月日时分秒及星期的方法;...
学习目标 1.掌握创建日期对象的方法 2.掌握date对象中获取日期时间的方法 3.掌握date对象中设置日期时间的方法如何创建一个日期对象语法:new Date(); 功能:创建一个日期时间对象 ...
python pandas 日期格式_python+pandas+时间、日期以及时间序列处理方法
先简单的了解下日期和时间数据类型及工具 python标准库包含于日期(date)和时间(time)数据的数据类型,datetime.time以及calendar模块会被经常用到. datetime以毫 ...
Java - 日期和时间：如何取得年月日、时分秒？如何取得从1970年1月1日0时0分0秒到现在的毫秒数？如何取得某月的最后一天？如何格式化日期？
分享一个大牛的人工智能教程.零基础!通俗易懂!风趣幽默!希望你也加入到人工智能的队伍中来!请点击http://www.captainbed.net 问题1:创建java.util.Calendar 实 ...
python 数字日期转换，格式化时间，日期加减天，小时，分钟
把数字转换成日期格式例如:数字 202105271354 转换成日期格式 2021-05-27 13:54:00 from dateutil.parser import parset_list1 ...
linux判断季末日期,C#根据当前时间确定日期范围（本周、本月、本季度、本年度）...
在C#的开发当中经常遇到关于一个日期时间"+/-"一段时间的问题,下面是一些相关总结,供大家参考. DateTime dt = DateTime.Now; //当前时间 DateT ...

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

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

最新文章

热门文章