vue 倒计时功能实现详解，快来 get 灵感

Vue.js 实现倒计时功能

原创已于 2025-03-08 11:26:11 修改 · 1.6w 阅读

49 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

于 2021-05-28 14:24:09 首次发布

vue 专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了如何在Vue.js应用中实现倒计时功能，包括HTML模板、数据绑定、计算属性和方法的使用。通过设置定时器动态更新倒计时，并阻止用户在倒计时期间重复点击获取验证码按钮，提供更好的用户体验。

前言

当我们浏览网页时，常常会看到各种倒计时效果，比如秒杀倒计时、限时抢购倒计时等等，它们为我们带来了更好的用户体验和更强的营销效果。而如何实现这些倒计时效果呢？本文将带大家了解具体的倒计时实现方法。

实现思路

html 部分

根据 isCounting 的值来动态显示不同的文本和样式。当 isCounting 为 true 时，按钮的背景色变为灰色，并且鼠标指针变为不可用；当 isCounting 为 false 时，按钮的样式恢复为默认样式。

<template>
  <div>
    <input type="text" v-model="code" placeholder="请输入验证码" />
    <button class="notGainBox" :class="{ 'yesGainBox': isCounting }" @click="verification">{{ buttonText }}</button>
  </div>
</template>

data 部分

在 vue 的 data 中定义了几个变量，包括 isCounting、countdown 和 code。isCounting 用于表示是否正在倒计时，初始值为 false；countdown 用于存储倒计时的秒数，初始值为 0；code 用于存储用户输入的验证码。

data() {
  return {
    code: "", //输入框model绑定
    isCounting: false, //控制显示'获取按钮'还是'倒计时'
    countdown: 0, //计数器
  };
},

computed 部分

使用 setInterval 函数创建了一个定时器，每隔 1 秒执行一次回调函数。在回调函数中，将 countdown 减 1，并判断是否倒计时结束。如果倒计时结束，清除定时器，并将 isCounting 设置为 false，表示倒计时结束。

buttonText() {
  return this.isCounting ? `${this.countdown}秒后重新获取` : "获取验证码";
},

methods 部分

在开始倒计时前，将 isCounting 设置为 true，表示正在倒计时。然后将 countdown 设置为 3，表示倒计时的初始值。
在点击获取验证码按钮的事件处理函数中，首先进行了一个条件判断，如果 isCounting 为 true，则直接返回，防止用户重复点击。这样可以避免出现多个倒计时同时进行的情况。

methods: {
  verification() {
    if (this.isCounting) {
      return;
    }
    this.isCounting = true;
    this.countdown = 3; //赋值3秒
    const times = setInterval(() => {
      this.countdown--; //递减
      if (this.countdown === 0) {
        // === 0 变成获取按钮
        clearInterval(times);
        this.isCounting = false;
      }
    }, 1000);
  },
},

css部分代码

<style scoped>
/* input输入框样式 */
input {
  width: 200px;
  padding: 0px 10px;
  height: 36px;
  border: none;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-right: 8px;
}

/* 默认获取验证码按钮样式 */
.notGainBox {
  border: none;
  background: #ff5000;
  color: #fff;
  height: 36px;
  padding: 0px 14px;
  border-radius: 4px;
  cursor: pointer;
}
/* 点击后获取验证码按钮样式 */
.yesGainBox {
  background: #ccc;
  cursor: not-allowed;
}
</style>

完整代码

<template>
  <div>
    <input type="text" v-model="code" placeholder="请输入验证码" />
    <button class="notGainBox" :class="{ 'yesGainBox': isCounting }" @click="verification">{{ buttonText }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: "", //输入框model绑定
      isCounting: false, //控制显示'获取按钮'还是'倒计时'
      countdown: 0, //计数器
    };
  },
  computed: {
    buttonText() {
      return this.isCounting ? `${this.countdown}秒后重新获取` : "获取验证码";
    },
  },
  methods: {
    verification() {
      if (this.isCounting) {
        return;
      }
      this.isCounting = true;
      this.countdown = 3; //赋值3秒
      const times = setInterval(() => {
        this.countdown--; //递减
        if (this.countdown === 0) {
          // === 0 变成获取按钮
          clearInterval(times);
          this.isCounting = false;
        }
      }, 1000);
    },
  },
};
</script>

<style scoped>
/* input输入框样式 */
input {
  width: 200px;
  padding: 0px 10px;
  height: 36px;
  border: none;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-right: 8px;
}

/* 默认获取验证码按钮样式 */
.notGainBox {
  border: none;
  background: #ff5000;
  color: #fff;
  height: 36px;
  padding: 0px 14px;
  border-radius: 4px;
  cursor: pointer;
}
/* 点击后获取验证码按钮样式 */
.yesGainBox {
  background: #ccc;
  cursor: not-allowed;
}
</style>