vue计算两个日期差几分钟(vue实现同时设置多个倒计时)
类别:编程学习 浏览量:1086
时间:2022-01-28 01:09:54 vue计算两个日期差几分钟
vue实现同时设置多个倒计时本文实例为大家分享了vue实现同时设置多个倒计时的具体代码,供大家参考,具体内容如下
html如下:
<li class="home"> <tbody> <tr v-for="(item, index) in bargainGoods" :key="index"> <td v-text="item.down + Djs_timeList(item.countDown)"></td> </tr> </tbody> </li>
js如下:
export default { data() { return { bargainGoods: [], total: 0, page: 1, serverTime: 0, timer: "" // hostUrl: this.$hostUrl }; }, //用于数据初始化 created: function() { // 获取数据 this.goods(); // 获取服务器时间 this.findServiceTime(); }, methods: { goods: function() { var _this = this; _this.$axios({ url: "goods/pageGoods", data: { current: -1, activityStatus: "", limit: -1, status: "SALE" }, success: response => { _this.bargainGoods = response.items; _this.Djs_time();// 调用定时器 // 以下是我处理的后台返回数据 开始时间和结束时间,页面显示用的 if (_this.bargainGoods.length != 0) { for (var key in _this.bargainGoods) { var hour = 0; var startime = 0; if (_this.bargainGoods[key] != null) { _this.bargainGoods[key].countDown = ""; _this.bargainGoods[key].down = ""; // 结束时间 hour = _this.bargainGoods[key].overTime; startime = _this.bargainGoods[key].activityStartTime; hour = hour.replace(/-/g, "/"); hour = new Date(hour).getTime(); startime = startime.replace(/-/g, "/"); startime = new Date(startime).getTime(); // 如果结束时间大于当前时间 if (hour > _this.serverTime && startime < _this.serverTime) { var hourtime = hour - _this.serverTime; if (hourtime > 0) { _this.bargainGoods[key].down = "结束倒计时:"; _this.bargainGoods[key].countDown = _this.bargainGoods[key].overTime; } } else if (startime > _this.serverTime) { var starhourtime = startime - _this.serverTime; if (starhourtime > 0) { _this.bargainGoods[key].down = "开始倒计时:"; _this.bargainGoods[key].countDown = _this.bargainGoods[key].activityStartTime; } } else { _this.bargainGoods[key].down = "已结束"; _this.bargainGoods[key].countDown = ""; } // console.log(_this.bargainGoods); } } _this.bargainGoods = _this.bargainGoods; } } }); }, // 获取服务器时间 findServiceTime() { var _this = this; _this.$axios({ url: "serverTime/getDateTime", success: function(res) { _this.serverTime = res.item; } }); }, Djs_time: function() { this.timer = setInterval(() => { this.serverTime = this.serverTime + 1000; }, 1000); }, Djs_timeList: function(itemEnd) { // 此处 itemEnd 的日期是年月日时分秒 var endItem = new Date(itemEnd).getTime(); //获取列表传的截止时间,转成时间戳 var nowItem = this.serverTime; //获取当前时间 var rightTime = endItem - nowItem; //截止时间减去当前时间 if (rightTime > 0) { //判断剩余倒计时时间如果大于0就执行倒计时否则就结束 var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24); var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24); var mm = Math.floor((rightTime / 1000 / 60) % 60); var ss = Math.floor((rightTime / 1000) % 60); var showTime = dd + "天" + hh + "小时" + mm + "分" + ss + "秒"; } else { var showTime = ""; } return showTime; }, }, //离开页面后清除定时器 destroyed() { clearInterval(this.timer); } };
效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue 父组件传值(Vue两个同级组件传值实现)
- vue3 ref 的用法(Vue3中watchEffect的用途浅析)
- vue监控对象变化(Vue之监听方法案例详解)
- vue集成文件上传插件(vue 实现上传组件)
- vue路由有几种实现模式(Vue实现路由过渡动效的4种方法)
- vue调用组件内部的方法(Vue如何实现组件间通信)
- vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
- vueweb端聊天(Vue实现聊天界面)
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- vue实现聊天(Vue+ssh框架实现在线聊天)
- vuecli项目入门(vue-cli4.5.x快速搭建项目)
- vue elementui 公共列表组件(Vue Element-ui表单校验规则实现)
- vue数据改变页面不刷新(vue列表数据删除后主动刷新页面及刷新方法详解)
- 中国有几个名族(中国有几个民族没列入56个民族)
- 数学语文题目(语文的数学题)
- 香蕉(香蕉三种人不宜吃)
- 没钱可以快乐吗(没钱也能快乐吗)
- 快乐是什么(快乐就是)
- 东南亚有哪个国家(东南亚有哪个国家最发达)
热门推荐
- 如何使用docker启动tomcat(简述Docker安装Tomcat镜像并部署web项目)
- docker部署mysql如何访问(完美解决docker安装mysql后Navicat连接不上的问题)
- python操作sql server数据库(Python 数据库操作 SQLAlchemy的示例代码)
- mybatis测试出现空指针(Mybatis非配置原因,导致SqlSession was not registered for synchronization异常)
- centos中docker安装部署(三分钟完成 ubuntu16.04初始化,Java,maven,docker环境的部署问题)
- dedecms搜索功能怎么设置详细(织梦Dedecms软件频道下载次数真实显示的权宜修改)
- docker镜像保存教程(docker镜像导入导出备份迁移的操作)
- ASP.NET中Partial Class部分类
- 如何调试部署在IIS上的网站
- webmaven项目如何启动(js基础语法与maven项目配置教程案例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9