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之监听方法案例详解)
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- vue查询条件生成工具(vue实现四级导航及验证码的方法实例)
- vue自定义组件修饰符(Vue自定义组件使用事件修饰符的踩坑记录)
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- vue点击事件动态禁用(vue开发移动端使用better-scroll时click事件失效的解决方案)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- vue组件详解(Vue的方法和属性案例详解)
- vue3.0怎么往标签填数据(Vue3.0写自定义指令的简单步骤记录)
- vue左右滑屏(vue中实现全屏以及对退出全屏的监听)
- vue react和angular(详解React Angular Vue三大前端技术)
- vue怎么实现输入框(vue车牌输入组件使用方法详解)
- vue项目做过哪些打包优化(Vue项目优化的一些实战策略)
- vue移动端页面不能上下滑动(vue移动端实现左滑编辑与删除的全过程)
- vue2.0自定义指令(vue2实现provide inject传递响应式)
- icon图标怎么引入vue(vue引入iconfont图标库的优雅实战记录)
- 菲律宾潜水(菲律宾潜水价格)
- 泰国人妖(变性手术生殖器要割掉吗)
- 泰国美女(泰国人妖和女性如何区分)
- 泰国旅游业怎么样(泰国的旅游产业)
- 越南新娘(越南新娘婚介网站)
- 越南新娘(越南新娘骗婚套路流程)
热门推荐
- 织梦cms怎么设置页面(织梦CMS调用问答栏目文章到首页实现方法分享)
- nginx反向代理spring boot(Nginx+SpringBoot实现负载均衡的示例)
- clear清理指令(详解利用clear清除浮动的一些问题解决)
- python发送微信消息脚本(python实现微信定时每天和女友发送消息)
- elasticsearch启动报错(解决Docker启动Elasticsearch7.x报错的问题)
- dedecms无缩略图怎么设置(dedecmsV5.7版 tag标签长度的修改方法详解)
- php建造者模式实例(PHP工厂模式、单例模式与注册树模式实例详解)
- python最基本的编程工具(5款Python程序员高频使用开发工具推荐)
- 如何使用docker部署(使用远程Docker进行集成测试的环境搭建过程)
- C#操作datatable