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 相关文章推荐
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
Vue Mint UI mt-swipe的使用方式
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进程同步代码实例
2015/02/12 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
浅谈php调用python文件
2019/03/29 PHP
IE bug table元素的innerHTML
2010/01/11 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
python实现在一个画布上画多个子图
2020/01/19 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
技术经理的自我评价范文
2013/12/03 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
音乐专业自荐信
2014/02/07 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
社会实践的活动方案
2014/08/22 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
2014年底工作总结
2014/12/15 职场文书
聘任书范文大全
2015/09/21 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
一文搞懂Java中的注解和反射
2022/06/21 Java/Android