vue+moment实现倒计时效果

实现倒计时效果是前端项目中常见的需求。本文将介绍如何使用vue和moment.js库实现倒计时效果，并提供两个示例进行说明。

步骤一：安装moment.js库

在使用moment.js库之前，我们需要先进行安装。具体步骤如下：

npm install moment --save

这样就可以在vue项目中使用moment.js库了。

步骤二：在vue组件中引入moment.js库并使用

在vue组件中引入moment.js库并使用的具体步骤如下：

在vue组件中引入moment.js库：

import moment from 'moment';

在vue组件中定义倒计时的结束时间和当前时间：

data() {
  return {
    endTime: '2022-01-01 00:00:00',
    nowTime: moment().format('YYYY-MM-DD HH:mm:ss')
  }
}

在vue组件的模板中使用计算属性和moment.js库实现倒计时效果：

<template>
  <div>{{ countDown }}</div>
</template>

<script>
  import moment from 'moment';

  export default {
    data() {
      return {
        endTime: '2022-01-01 00:00:00',
        nowTime: moment().format('YYYY-MM-DD HH:mm:ss')
      }
    },
    computed: {
      countDown() {
        const end = moment(this.endTime);
        const now = moment(this.nowTime);
        const diff = end.diff(now);
        const duration = moment.duration(diff);
        const days = Math.floor(duration.asDays());
        const hours = duration.hours();
        const minutes = duration.minutes();
        const seconds = duration.seconds();
        return `${days}天${hours}时${minutes}分${seconds}秒`;
      }
    }
  }
</script>

这里通过计算属性countDown来实现倒计时效果，具体实现方法是通过moment.js库计算出当前时间与倒计时结束时间的时间差diff，然后通过moment.duration()方法将时间差转换为时间段，最后通过获取时间段中的天、小时、分钟、秒等信息拼接成字符串，即为倒计时的效果。

示例一：倒计时显示剩余支付时间

示例一为倒计时显示剩余支付时间，具体实现方法是将倒计时的结束时间设置为小于等于当前时间的时间，这样就可以模拟订单已过期或关闭的情况。代码如下：

<template>
  <div v-if="isPayable">{{ countDown }}</div>
  <div v-else>订单已过期</div>
</template>

<script>
  import moment from 'moment';

  export default {
    data() {
      return {
        endTime: moment().add(1, 'hours').format('YYYY-MM-DD HH:mm:ss'),
        nowTime: moment().format('YYYY-MM-DD HH:mm:ss')
      }
    },
    computed: {
      countDown() {
        const end = moment(this.endTime);
        const now = moment(this.nowTime);
        const diff = end.diff(now);
        const duration = moment.duration(diff);
        const minutes = duration.minutes();
        const seconds = duration.seconds();
        return `${minutes}分${seconds}秒`;
      },
      isPayable() {
        const end = moment(this.endTime);
        const now = moment(this.nowTime);
        return end.diff(now) > 0;
      }
    }
  }
</script>

这段代码中，首先我们将倒计时的结束时间设置为当前时间加上1个小时。然后通过计算属性countDown来实现倒计时及显示倒计时剩余时间。

最后通过计算属性isPayable来判断订单是否已过期，如果倒计时结束时间小于等于当前时间，则订单已过期，此时隐藏倒计时并显示提示信息“订单已过期”。

示例二：倒计时显示活动剩余时间

示例二为倒计时显示活动剩余时间，具体实现方法是根据活动结束时间来设置倒计时的结束时间，并通过计算属性isEnded来判断活动是否已结束。代码如下：

<template>
  <div v-if="isEnded">活动已结束</div>
  <div v-else>{{ countDown }}</div>
</template>

<script>
  import moment from 'moment';

  export default {
    data() {
      return {
        endTime: '2022-02-01 00:00:00',
        nowTime: moment().format('YYYY-MM-DD HH:mm:ss')
      }
    },
    computed: {
      countDown() {
        const end = moment(this.endTime);
        const now = moment(this.nowTime);
        const diff = end.diff(now);
        const duration = moment.duration(diff);
        const days = Math.floor(duration.asDays());
        const hours = duration.hours();
        const minutes = duration.minutes();
        const seconds = duration.seconds();
        return `距离活动结束还有${days}天${hours}时${minutes}分${seconds}秒`;
      },
      isEnded() {
        const end = moment(this.endTime);
        const now = moment(this.nowTime);
        return end.diff(now) <= 0;
      }
    }
  }
</script>

这段代码中，我们将倒计时的结束时间设置为活动结束时间。然后通过计算属性countDown来实现倒计时及显示距离活动结束的剩余时间。

最后通过计算属性isEnded来判断活动是否已结束，如果倒计时结束时间小于等于当前时间，则活动已结束，此时隐藏倒计时并显示提示信息“活动已结束”。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue+moment实现倒计时效果 - Python技术站