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

前言
当我们浏览网页时，常常会看到各种倒计时效果，比如秒杀倒计时、限时抢购倒计时等等，它们为我们带来了更好的用户体验和更强的营销效果。而如何实现这些倒计时效果呢？本文将带大家了解具体的倒计时实现方法。
实现思路
html 部分
根据的值来动态显示不同的文本和样式。当为 true 时，按钮的背景色变为灰色，并且鼠标指针变为不可用；当为 false 时，按钮的样式恢复为默认样式。

data 部分
在 vue 的 data 中定义了几个变量，包括、和 code 。用于表示是否正在倒计时，初始值为 false；用于存储倒计时的秒数，初始值为 0；code 用于存储用户输入的验证码。
【vue 倒计时功能实现详解，快来 get 灵感】

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

部分
使用函数创建了一个定时器，每隔 1 秒执行一次回调函数。在回调函数中，将减 1，并判断是否倒计时结束。如果倒计时结束，清除定时器，并将设置为 false，表示倒计时结束。
buttonText() {return this.isCounting ? `${this.countdown}秒后重新获取` : "获取验证码";},
部分
在开始倒计时前，将设置为 true，表示正在倒计时。然后将设置为 3，表示倒计时的初始值。
在点击获取验证码按钮的事件处理函数中，首先进行了一个条件判断，如果为 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部分代码

/* 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;}

完整代码


>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);},},};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;}

实现效果