Vue写一个简单的倒计时按钮功能

在项目开发里，我们经常会遇到发送验证码、点击了之后有60秒倒计时的按钮，很常见却也很简单，但是在写这个按钮的时候有个别地方还要注意下，今天写出来，如有问题欢迎指正！

完成的效果如下：

为了更快显示出效果，我把时间设成了5秒。按钮在点击之后会出现倒计时，同时按钮变为不可点击状态，样式也发生变化，鼠标悬浮上的样子也会发生变化。

接下来我们用代码来实现：

<button class="button" @click="countDown">
 {{content}}
</button>

...

data () {
 return {
 content: '发送验证码', // 按钮里显示的内容
 totalTime: 60 //记录具体倒计时时间
 }
},
methods: {
 countDown() {
 let clock = window.setInterval(() => {
 this.total--
 this.content = this.total + 's后重新发送'
 },1000)
 }
}

在data里加了两条数据，一条用来记录时间，一条用来盛放倒计时按钮的具体内容。在countDown函数里我们用了setInterval定时器，每隔一秒totalTime减1，同时更改按钮里显示的内容。 在window.setInterval里用了箭头函数，因为它会自动绑定外面的this，所以就不用先存下this了。

效果如下图：

但是这个按钮还有一些问题：

点击了按钮之后过了1秒就直接从59秒开始倒计时了，中间的60不见了
倒计时的时候还可以点击
还没有清除倒计时

接下来需要继续完善countDown函数来解决这些问题。

countDown () {
 this.content = this.totalTime + 's后重新发送' //这里解决60秒不见了的问题
 let clock = window.setInterval(() => {
 this.totalTime--
 this.content = this.totalTime + 's后重新发送'
 if (this.totalTime < 0) { //当倒计时小于0时清除定时器
 window.clearInterval(clock)
 this.content = '重新发送验证码'
 this.totalTime = 60
 }
 },1000)
},

上面的代码解决了60不见的问题，同时当totalTime小于0时清除同时器、重新设置按钮里的content、将totalTime重置为60以便下次使用。

倒计10秒的效果：

发现bug，多次点击之后，倒讲时速度变快，这是因为每次点击都会启动一个setInterval，这些setInterval都会减少totalTime。解决的方法也很简单：简单节流一下就好了，就是第一次点击按钮之后让countDonw这个函数的代码不可执行，等到倒计时结束之后才可以再次执行。

data () {
 return {
 content: '发送验证码',
 totalTime: 10,
 canClick: true //添加canClick
 }
}

...

countDown () {
 if (!this.canClick) return //改动的是这两行代码
 this.canClick = false
 this.content = this.totalTime + 's后重新发送'
 let clock = window.setInterval(() => {
 this.totalTime--
 this.content = this.totalTime + 's后重新发送'
 if (this.totalTime < 0) {
 window.clearInterval(clock)
 this.content = '重新发送验证码'
 this.totalTime = 10
 this.canClick = true //这里重新开启
 }
 },1000)
}

在data里添加canClick，默认是true，如果canClick为true，countDown里的代码可以执行，如果是false就不行。每执行一次就将canClick设为false，而只在倒计时结束的时候再改为true。这样刚才的问题就没有了。

到这里其实就差不多了，不过还可以调整下样式：

<button class="button" :class="{disabled: !this.canClick}" @click="countDown">
...
.disabled{
 background-color: #ddd;
 border-color: #ddd;
 color:#57a3f3;
 cursor: not-allowed; // 鼠标变化
}

效果：

这个倒计时按钮十分简单，但是我第一次写的时候还是写的很乱，而且那个时候还不知道函数节流的概念。

总结

以上所述是小编给大家介绍的Vue写一个简单的倒计时按钮功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

哗拓教育还为您提供以下相关内容希望对您有帮助：

在countDown函数里我们用了setInterval定时器，每隔一秒totalTime减1，同时更改按钮里显示的内容。 在window.setInterval里用了箭头函数，因为它会自动绑定外面的this，所以就不用先存下this了。效果如下图： 但是这个按钮还有一些问题：点击了按钮之后过了1秒就直接从59秒开始倒计时了，中间的60不见了倒...

创建基础组件，实现基本倒计时功能。设置使用setInterval或setTimeout实现倒计时。使用setTimeout替代setInterval，避免某些间隔跳过和多个定时器连续执行的问题。在倒计时组件中通过watch监听时间参数变化，确保在时间改变时重新计时。注意，使用diffTime方法解决浏览器在后台或失去焦点时定时任务暂停的问题，保证倒...

第一步：布局构建 通过 mint UI 插件创建页面布局。先确保安装 mint UI。页面中包含一个提示信息区域和一个按钮。示例代码如下：{{hqyzm}} click="sityzm()" 当用户点击按钮时，触发 sityzm 方法。接下来，详细解释关键方法 sityzm 和 inputyz 的逻辑。方法 sityzm 用于启动倒计时流程：示例代码如...

首先，我们将问题分解为两个组件：列表组件（List）和倒计时组件（Counter）。在列表组件中，通过接收父组件传递的数据（listData）来展示列表。接着，我们需要在倒计时组件中实现计时功能。可以利用 Vue 的生命周期钩子（如 created 或 mounted）初始化计时器，并在更新数据时重新设置计时器。最终效果是：...

cc-countdown是一个强大的倒计时组件，它允许开发者自定义显示剩余时间的格式，包括天数、小时、分钟和秒数。通过设置不同的属性，如文字颜色、背景色和分割符色，可以轻松调整组件外观。此外，它还支持定制化行为，比如显示冒号和触发自定义事件，如倒计时结束后的操作。使用cc-countdown组件的步骤包括在...

7. **提交验证**：当用户输入了正确的用户名、密码以及验证码，并且倒计时结束后，可以提交验证信息到后端进行登录处理。使用Vue.js的`axios`库或者后端提供的API接口来完成数据的提交。通过上述步骤，可以成功地在Vue.js与Element UI框架下实现登录页的手机验证码、倒计时等功能。确保在开发过程中考虑到...

在深入研究源码后，我们发现倒计时组件的实现中包含了一些关键技巧。例如，通过使用`setInterval`进行每秒更新，虽然简单有效，但并不适用于毫秒级倒计时。因此，我们重点分析了`vant`组件库如何实现毫秒级的倒计时功能，其核心在于巧妙地利用`Date.now()`和`requestAnimationFrame()`的特性，每16.67毫秒...

VUE添加录音步骤如下：1. 编辑视频时，点击右下角的“导入”按钮添加视频素材，随后选择右上角的“编辑”按钮。2. 进入视频编辑页面后，通过下方列表选择“音乐”分类，找到“录音”功能进行设置。3. 开启录音功能后，即可直接为视频添加自己的录音，满足不同需求的用户可以尝试使用。

JS定时器： var myVar = setInterval(myTimer, 1000);function myTimer() { var d = new Date();document.getElementById("demo").innerHTML = d.toLocaleTimeString();}

vue中的前端问题:一个数据列表,有几个数据要实现倒计时,每个数据的倒计时的时间不一样,有的可能是1分钟倒计时,有的可能是2分钟倒计时,该如何实现... vue中的前端问题:一个数据列表,有几个数据要实现倒计时,每个数据的倒计时的时间不一样,有的可能是1分钟倒计时,有的可能是2分钟倒计时,该如何实现 展开 ...