Vue根据时间戳制作倒计时15分钟
废话不多说直接上代码
<script>
export default {
data() {
return {
downTimeShow: true,
timer: null,
downTime: '',
nowTime: '',
orderList:[
{addTime:'2023.03.27 13:55'},
{addTime:'2023.03.27 11:16'},
],
}
},
//在挂载时启动定时器
mounted() {
let that = this;
this.timer = setInterval(() => {
that.nowTime = new Date().getTime()
this.operaDownTime()
}, 1000);
},
//实例销毁之前清除定时器
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer);
}
},
created() { },
methods: {
//处理倒计时
operaDownTime() {
var ndate = new Date()
this.orderList.forEach((item, index) => {
// 对列表每一项的addtime转成时间戳并用当前时间戳减去addtime时间戳,得到时间差。
// 若是时间差大于15分钟,则不显示剩余时间,小于15分钟则显示。
item.downTimeShow = false
// item的年月日
var dd = new Date(item.addTime)
var ddYear = dd.getFullYear()
var ddMonth = dd.getMonth() + 1
var ddDay = dd.getDate()
// 当前年月日
var td = new Date()
var year = td.getFullYear()
var month = td.getMonth() + 1
var day = td.getDate()
// 当年当月当日
if(year - ddYear === 0 && ddMonth - month === 0 && ddDay-day === 0){
item.downTime = this.nowTime - dd.getTime()
var minutes = (item.downTime % (1000 * 60 * 60)) / (1000 * 60)
var secondes = (item.downTime % (1000 * 60)) / (1000)
// 限制15分钟
var limitMinutes = (900000 % (1000 * 60 * 60)) / (1000 * 60)
// 剩余时间
var remainMinutes = limitMinutes - minutes
var remainSecondes = 60 - secondes
// 向下取整 如果分小于0则表示倒计时已结束 关闭展示倒计时
if (Number(Math.floor(remainMinutes)) < 0) {
item.downTimeShow = false
} else {
item.downTimeShow = true
item.downTime = Math.floor(remainMinutes) + ':' + Math.floor(remainSecondes) + ''
}
}
})
}
}
}
</script>
Vue根据时间戳制作倒计时15分钟的更多相关文章
- Vue 页面15分钟无操作时返回首页
这种需求手机端和pc端一般是不存在的,因为都是可以手动操作刷新的. 最近在做一个户外社区大屏的项目,因为大屏是全屏显示,没法手动刷新,不可能在页面专门做一个刷新按钮,也不好看,那这样的需求就显得格外重 ...
- mysql查超过15分钟未付款的订单,更新为失效状态
个人打开自己的订单时,才检查超过15分钟未付款的订单, 暂不使用机器人,更新状态, Difference counter 差分计数器订单超过15分钟.mysql的时间戳差分比较 $sql = TIM ...
- 时间戳显示为多少分钟前,多少天前的JS处理
/* ** 时间戳显示为多少分钟前,多少天前的处理 ** eg. ** console.log(dateDiff(1411111111111)); // 2014年09月19日 ** console. ...
- Vue -- filters 过滤器、倒计时效果
局部过滤器 时间.***号 <div id="wrapper" class="wrapper" style="display: none;&qu ...
- 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)
15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经 ...
- 获取当前时间UTC时间的下一个15分钟时间点
ZonedDateTime zdt = ZonedDateTime.now(ZoneOffset.UTC); int now15Minute = zdt.getMinute() / P15MINUTE ...
- 15分钟学会使用Git和远程代码库
git是个了不起但却复杂的源代码管理系统.它能支持复杂的任务,却因此经常被认为太过复杂而不适用于简单的日常工作.让我们诚实一记吧:Git是复杂的,我们不要装作它不是.但我仍然会试图教会你用(我的)基本 ...
- Bash脚本15分钟进阶教程
转载: Bash脚本15分钟进阶教程 这里的技术技巧最初是来自谷歌的"Testing on the Toilet" (TOTT).这里是一个修订和扩增版本. 脚本安全 我的所有ba ...
- 15分钟理解HTTPS——通俗篇
| 导语 它很深奥吗?你肯定常常见过它,使用它,甚至离不开它... 它很浅显吗?你可能觉得看透它,理解它,甚至懂它... 让我们用15分钟,不那么学术地将它的深挖到底~ 什么?如何证明我是我?本文要上 ...
- 使用vue全家桶制作博客网站
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...
随机推荐
- MySQL学习(十一)为什么不推荐使用uuid和雪花id
参考博客:https://www.cnblogs.com/wyq178/p/12548864.html 自增的主键的值是顺序的,所以Innodb把每一条记录都存储在一条记录的后面.当达到页面的最大填充 ...
- 刘勇智:一码通缺陷分析与架构设计方案丨声网开发者创业讲堂 Vol.02
本文内容源自「声网开发者创业讲堂 Vol.02」的演讲分享,分享讲师为 Thoughtworks 专家级咨询师刘勇智.大家可以点击此链接,观看视频回放以及下载讲师 PPT. 从去年年底到现在,随着疫情 ...
- RTE2021 回顾丨HDR 技术产品实践与探索
本文整理自 OPPO HDR 研发负责人熊磊,在 RTE2021 实时互联网大会上的演讲.他通过介绍 HDR 视频标准与生态.关键技术.发展方向三部分,分享了在移动端 HDR 视频的落地情况以及技术细 ...
- 机器学习基础02DAY
数据的特征预处理 单个特征 (1)归一化 归一化首先在特征(维度)非常多的时候,可以防止某一维或某几维对数据影响过大,也是为了把不同来源的数据统一到一个参考区间下,这样比较起来才有意义,其次可以程序可 ...
- php in_array 遍历,in_array大数组查询性能问题
问题最近在实现一个项目接口的时候发现当数组过大的时候,数据返回的速度有点慢.接口数据返回最长反应时间2s,经过反复调试发现代码段耗时最长的部分在in_array()函数.解决过程在stackoverf ...
- Python常见面试题017: Python中是否可以获取类的所有实例
017. Python中是否可以获取类的所有实例 转载请注明出处,https://www.cnblogs.com/wuxianfeng023 出处 https://docs.python.org/zh ...
- Ubuntu编译安装protobuf-3.6.1
一.下载源码包 下载源码URL:https://github.com/protocolbuffers/protobuf/releases/download/v3.6.1/protobuf-all-3. ...
- Python pip速度慢,更换源
版权声明:本文为CSDN博主「cocoprince」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/Coco ...
- MyQR--生成个性二维码
1.二维码定义: 二维码(2-Dimensional Bar Code),是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的.它是指在一维条码的基础上扩展出另一 ...
- oss/obs对象存储上传图片,在浏览器输入地址却是下载图片。不能直接在浏览器上查看。
1.问题oss/obs对象存储上传图片获取链接地址后,在浏览器输入地址却是下载.不能直接在浏览器上面浏览图片信息.2.解决上传文件的时候需要设置:content-type类型,需要指示浏览器这是什么类 ...