vue实现同时设置多个倒计时


Posted in Vue.js onMay 20, 2021

本文实例为大家分享了vue实现同时设置多个倒计时的具体代码,供大家参考,具体内容如下

html如下:

<div class="home">
    <tbody>
      <tr v-for="(item, index) in bargainGoods" :key="index">
        <td v-text="item.down + Djs_timeList(item.countDown)"></td>
      </tr>
    </tbody>
</div>

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.js 相关文章推荐
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
Vue和Flask通信的实现
Vue Element UI自定义描述列表组件
使用这 6个Vue加载动画库来减少我们网站的跳出率
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
详解vue中v-for的key唯一性
解读Vue组件注册方式
May 15 #Vue.js
如何理解Vue简单状态管理之store模式
May 15 #Vue.js
You might like
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
JavaScript实现区块链
2018/03/14 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
Python中__call__用法实例
2014/08/29 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
python变量命名的7条建议
2019/07/04 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
python 元组的使用方法
2020/06/09 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
企业治理工作自我评价
2013/09/26 职场文书
管理信息系学生的自我评价
2014/01/11 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
大学班长竞选稿
2015/11/20 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android