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组件详解(Vue的方法和属性案例详解)
- vue和springboot实战项目(vue+spring boot实现校验码功能)
- vue实现聊天(Vue+ssh框架实现在线聊天)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue组件方法里如何修改data(vue项目中使用rem替换px的实现示例)
- 数组循环遍历展示vue(Vue中foreach数组与js中遍历数组的写法说明)
- vue设置div大小(Vue实现div滚轮放大缩小)
- vue用于动态切换组件的内置组件(Vue 可拖拽组件Vue Smooth DnD的使用详解)
- vue控制div滚动条(vue3实现CSS无限无缝滚动效果)
- vue怎么引入axios(如何用vue封装axios请求)
- vue怎么更换自定义水印(Vue之全局水印的实现示例)
- vue路由跳转的方法(Vue路由监听实现同页面动态加载的示例)
- vue考试链接重置(Vue实现答题功能)
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- vue时间转换(vue如何动态实时的显示时间浅析)
- 七年前的这部剧有毒,全剧只有女主红到发紫,男主至今无人认识(七年前的这部剧有毒)
- 宋轶除了演过于曼丽,原来还演过一个青楼女子(宋轶除了演过于曼丽)
- 赵丽颖第一部当女主的戏,主角配角个个都是实力演员(赵丽颖第一部当女主的戏)
- 乾隆为何这么喜爱白塔原因是什么(乾隆为何这么喜爱白塔原因是什么)
- 逐渐消失的东北八大怪现象,进步的社会里我们遗失的是什么(逐渐消失的东北八大怪现象)
- 今日大雪,大雪养生这样做,一年都有好气色(大雪养生这样做)
热门推荐
- python模块光照强度(我如何用 CircuitPython 和开源工具监控温室)
- MVC中使用DropDownList
- php环境搭建apache(apache 支持 php5 的配置方法)
- phpstorm代码模板(phpStorm+XDebug+chrome 配置详解)
- django学生管理系统搭建(Django实现学员管理系统)
- php查询数据库给变量赋值(详解PHP变量传值赋值和引用赋值变量销毁)
- dedecms图片延迟加载(dedecms获取图片集多张图片实现方法循环输出)
- laravel数据绑定(laravel-admin表单提交隐藏一些数据,回调时获取数据的方法)
- sqlserver 存储过程参数类型(详解SQL Server表和索引存储结构)
- java集成钉钉发送消息(Python实现钉钉发送报警消息的方法)