广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现同时设置多个倒计时
  • 447
分享到

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

2024-04-02 19:04:59 447人浏览 独家记忆
摘要

本文实例为大家分享了Vue实现同时设置多个倒计时的具体代码,供大家参考,具体内容如下 html如下: <div class="home"> <tbody

本文实例为大家分享了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);
  }
};

效果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: vue实现同时设置多个倒计时

本文链接: https://www.lsjlt.com/news/126397.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue实现同时设置多个倒计时
    本文实例为大家分享了vue实现同时设置多个倒计时的具体代码,供大家参考,具体内容如下 html如下: <div class="home"> <tbody...
    99+
    2022-11-12
  • vue如何实现同时设置多个倒计时
    这篇文章主要介绍vue如何实现同时设置多个倒计时,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下html如下:<div class="home"> &nb...
    99+
    2023-06-15
  • JS/jquery如何实现一个网页内同时调用多个倒计时
    小编给大家分享一下JS/jquery如何实现一个网页内同时调用多个倒计时,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!效果如:v...
    99+
    2022-10-19
  • vue实现时间倒计时功能
    本文实例为大家分享了vue实现时间倒计时功能的具体代码,供大家参考,具体内容如下 需求: 做一个剩余支付时间倒计时的效果 效果图: 代码: <template> ...
    99+
    2022-11-12
  • vue实现倒计时功能
    本文实例为大家分享了vue实现倒计时功能的具体代码,供大家参考,具体内容如下 通过父组件传入的结束时间减去当前日期得到剩余时间 1.子组件部分 <div class="it...
    99+
    2022-11-11
  • vue实现列表倒计时
    本文实例为大家分享了vue实现列表倒计时的具体代码,供大家参考,具体内容如下 如图10分钟倒计时 在做项目的时候遇到vue列表要用到倒计时的方法,想直接在页面中处理,使用vue过滤...
    99+
    2022-11-13
  • javascript实现同步服务器时间、同步倒计时
    这篇文章主要介绍“javascript实现同步服务器时间、同步倒计时”,在日常操作中,相信很多人在javascript实现同步服务器时间、同步倒计时问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方...
    99+
    2022-10-19
  • Vue实现倒计时小功能
    很多项目中都需要实现倒计时功能,例:发送验证码。现在举例实现一个简单的倒计时按钮功能。简单布局,简单操作,简单效果,最主要的是思路和倒计时步骤理解!!! 例、代码如下: 要求:点击提...
    99+
    2022-11-12
  • vue怎么实现时间倒计时功能
    本篇内容介绍了“vue怎么实现时间倒计时功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!需求:做一个剩余支付时间倒计时的效果效果图:代码:...
    99+
    2023-06-20
  • vue如何设计一个倒计时秒杀的组件
    这篇文章将为大家详细讲解有关vue如何设计一个倒计时秒杀的组件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。简介:倒计时秒杀组件在电商网站中层出不穷  不过思路...
    99+
    2022-10-19
  • 使用vue怎么实现一个倒计时功能
    这期内容当中小编将会给大家带来有关使用vue怎么实现一个倒计时功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。通过父组件传入的结束时间减去当前日期得到剩余时间子组件部分<div clas...
    99+
    2023-06-14
  • vue实现点击按钮倒计时
    本文实例为大家分享了vue实现点击按钮倒计时的具体代码,供大家参考,具体内容如下 实现效果: 1.点击开始按钮启动计时 2.点击重置按钮计时恢复到00:00:00 3.点击暂停按钮...
    99+
    2022-11-13
  • vue实现秒杀倒计时组件
    本文实例为大家分享了vue实现秒杀倒计时组件的具体代码,供大家参考,具体内容如下 下面是使用Vue实现秒杀倒计时组件 开发思路 1.请求服务器获取这一刻的服务器时间(统一以服务器时...
    99+
    2022-11-12
  • vue、react如何实现倒计时效果
    这篇文章主要介绍vue、react如何实现倒计时效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Vue方案一:俩个元素HTML:<div id="exam...
    99+
    2022-10-19
  • vue实现验证码倒计时按钮
    本文实例为大家分享了vue实现验证码倒计时按钮的具体代码,供大家参考,具体内容如下 1、点击“发送验证码”按钮后进行逻辑判断: ▶️ 如果邮箱已输入且格式正...
    99+
    2022-11-12
  • 利用Android实现一个倒计时功能
    这篇文章给大家介绍利用Android实现一个倒计时功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。先上效果图activity_main.xml<&#63;xml version="1.0&qu...
    99+
    2023-05-31
    android roi
  • css class怎么同时设置多个值
    本篇内容介绍了“css class怎么同时设置多个值”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! cl...
    99+
    2022-10-19
  • vue中同时监听多个参数的实现
    目录如何同时监听多个参数data中定义一个对象完整代码vue事件监听,条件判断事件监听 v-on条件判断如何同时监听多个参数 vue使用watch同时监听多个参数,其中有任意一个参数...
    99+
    2022-11-13
  • vue实现指定日期之间的倒计时
    本文实例为大家分享了vue实现指定日期之间倒计时的具体代码,供大家参考,具体内容如下 效果图如下 此处使用moment.js日期处理类库 使用方法如下 npm install mo...
    99+
    2022-11-12
  • JavaScript中怎么实现一个倒数计时器
    本篇文章给大家分享的是有关JavaScript中怎么实现一个倒数计时器,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。有时,您将需要构建一个Ja...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作