Vue根据时间戳制作倒计时15分钟

时间,倒计时,制作 · 浏览次数 : 58

小编点评

```javascript 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(); that.operaDownTime(); }, 1000); }, beforeDestroy() { if (this.timer) { clearInterval(this.timer); } }, created() { }, methods: { operaDownTime() { var ndate = new Date(); this.orderList.forEach((item, index) => { // 对列表每一项的addtime转成时间戳并用当前时间戳减去addtime时间戳,得到时间差。 item.downTimeShow = false; var dd = new Date(item.addTime); var ddYear = dd.getFullYear(); var ddMonth = dd.getMonth() + 1; var ddDay = dd.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 - seconds; // 向下取整 如果分小于0则表示倒计时已结束 关闭展示倒计时 if (Number(Math.floor(remainMinutes)) < 0) { item.downTimeShow = false; } else { item.downTimeShow = true; item.downTime = Math.floor(remainMinutes) + ':' + Math.floor(remainSecondes) + ''; } } }); }, }, }; ```

正文

废话不多说直接上代码

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

废话不多说直接上代码

vue 甘特图(三):甘特图右侧内容拖动展示

vue3 甘特图(三):甘特图右侧内容拖动展示内容 解决因多个项目周期跨度不同,在一页屏幕里展示不完全,需要通过拖动甘特图下方的滚动条,去查看对应时间段内的内容 拖拽滚动视图,展示对应时间甘特图 构思,通过监听内容拖拽的距离,同时使滚动条滑动相同距离,从而达到效果。 //拖拽滚动视图 const s

每日一题:vue3自定义指令大全(呕心沥血所作,附可运行项目源码)

1.VUE常用指令大全 本项目所有指令均为全局注册,使用时直接在组件中使用即可。 指令目录:src/directives 页面目录:src/views 具体可查看源码 1.1 权限指令 封装一个权限指令,在模板中根据用户权限来控制元素的显示或隐藏。 permission.js import { re

『手撕Vue-CLI』拉取版本号

开篇 在上一篇文章中,给 nue-cli 添加了与用户终端交互的功能,这一次来实现一个拉取版本号的功能。 这个功能的背景是,有时候我们在使用脚手架的时候,不同版本的脚手架可能会有不同的功能,所以用户有可能会根据自己的需求选择不同的版本,所以这里将会实现一个根据用户选择的版本号,拉取对应的版本号的模板

OpenTiny 跨端、跨框架组件库升级TypeScript,10万行代码重获新生

摘要:一份精心准备的《JS项目改造TS指南》文档供大家参考,顺便介绍TS 基础知识和 TS 在 Vue 中的实践。 本文分享自华为云社区《历史性的时刻!OpenTiny 跨端、跨框架组件库正式升级 TypeScript,10 万行代码重获新生!》,作者:Kagol。 根据 The Software

『手撕Vue-CLI』拷贝模板

开篇 经过上篇文章的介绍,实现了可以根据用户选择的模板名称加上对应的版本号,可以下载对应的模板,并且将下载之后的文件存放在用户目录下的 .nue-template文件夹中。 接下来这篇文章主要实现内容是将下载的模板文件拷贝到当前所执行命令的目录下。 拷贝模板 例如我现在在终端当中输入 nue-cli

Iframe在Vue中的状态保持技术

Iframe是一个历史悠久的HTML元素,根据MDN WEB DOCS官方介绍,Iframe定义为HTML内联框架元素,表示嵌套的Browsing Context,它能够将另一个HTML页面嵌入到当前页面中。Iframe可以廉价实现跨应用级的页面共享,并且具有使用简单、高兼容性、内容隔离等优点,因此以Iframe为核心形成了前端平台架构领域第1代技术。

跟我一起学习和开发动态表单系统-前端用vue、elementui实现方法(3)

基于 Vue、Element UI 和 Spring Boot + MyBatis 的动态表单系统前端实现解析 在现代企业信息系统中,动态表单是一种非常常见的功能。它可以根据业务需求灵活地调整表单结构,以满足不同的数据收集和展示需求。在本文中,我们将探讨一种基于 Vue、Element UI 和 S

终于搞懂了!原来 Vue 3 的 generate 是这样生成 render 函数的

前言 在之前的 面试官:来说说vue3是怎么处理内置的v-for、v-model等指令? 文章中讲了transform阶段处理完v-for、v-model等指令后,会生成一棵javascript AST抽象语法树。这篇文章我们来接着讲generate阶段是如何根据这棵javascript AST抽象

「AntV」X6 自定义vue节点(vue3)

官方文档 本篇文档只讲解vue3中如何使用,vue2的可以参考下官方文档 安装插件 @antv/x6-vue-shape 添加vue组件 既然使用vue节点,那么我们就需要准备一个vue的组件,这个组件就是节点的一些样式,根据你们的ui自行写代码即可 节点名称