很多项目中都需要实现倒计时功能，例：发送验证码。现在举例实现一个简单的倒计时按钮功能。简单布局，简单操作，简单效果，最主要的是思路和倒计时步骤理解！！！ 例、代码如下： 要求：点击提
很多项目中都需要实现倒计时功能，例：发送验证码。现在举例实现一个简单的倒计时按钮功能。简单布局，简单操作，简单效果，最主要的是思路和倒计时步骤理解！！！
例、代码如下：
要求：点击提交按钮倒计时五秒，倒计时期间输入框和提交按钮禁用，倒计时结束后输入框和提交按钮再变成正常状态
1、先实现要求的html布局，添加点击事件
<div>
<!-- disabled为true禁用 -->
输入框：<input type="text" :disabled="istrue">
<button @click="addHandle" :disabled="istrue">提交</button>
<!-- 倒计时文字提示 -->
<p>{{this.txt}}</p>
</div>2、点击提交按钮倒计时开始变禁用状态，定义一个计时器
<script>
export default {
data(){
return {
txt:'',
istrue:false,
inp:''
}
},
methods:{
addHandle(){
//定义n=5秒
let n=5
//定义定时器time
let time=setInterval(()=>{
//禁用
this.istrue=true
//改变倒计时文字提示
this.txt=n+'秒后提交'
n--
//如果n<0，清除定时器，禁用状态取消，文字提示为空（不显示）
if(n<0){
this.txt=""
this.istrue=false
clearInterval(time)
}
},1000)
}
}
}
</script>思路步骤都写在上方注释里了，一个简单的倒计时就这样轻易实现了。
整体代码：
<template>
<div>
<!-- disabled为true禁用 -->
输入框：<input type="text" :disabled="istrue">
<button @click="addHandle" :disabled="istrue">提交</button>
<!-- 倒计时文字提示 -->
<p>{{this.txt}}</p>
</div>
</template>
<script>
export default {
data(){
return {
txt:'',
istrue:false,
inp:''
}
},
methods:{
addHandle(){
//定义n=5秒
let n=5
//定义定时器time
let time=setInterval(()=>{
//禁用
this.istrue=true
//改变倒计时文字提示
this.txt=n+'秒后提交'
n--
//如果n<0，清除定时器，禁用状态取消，文字提示为空（不显示）
if(n<0){
this.txt=""
this.istrue=false
clearInterval(time)
}
},1000)
}
}
}
</script>--结束END--
本文标题: Vue实现倒计时小功能
本文链接: https://lsjlt.com/news/135570.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0