微客导航 » 文章资讯 » 基于vue、react实现倒计时效果

基于vue、react实现倒计时效果

2023-08-16 15:21:04 171

本文实例为大家分享了基于vue、react实现倒计时效果的具体代码，供大家参考，具体内容如下

Vue

方案一：俩个元素

HTML：



{{time+'秒后获取'}}
send

JS：

varvm=newVue({
el:'#example',
data(){
return{
time:60,//发送验证码倒计时
sendMsgDisabled:false
}
},
methods:{
send(){
letme=this;
me.sendMsgDisabled=true;
letinterval=window.setInterval(function(){
if((me.time--)<=0){
me.time=60;
me.sendMsgDisabled=false;
window.clearInterval(interval);//停止
}
},1000);
}
}
})

方案二：一个元素，改变文字

HTML：


//倒计时按钮禁用:disabled="sendMsgDisabled

JS：

varvm=newVue({
el:'#example',
data(){
return{
time:60,//发送验证码倒计时
sendMsgDisabled:false//按钮可用
}
},
methods:{
time(){
this.sendMsgDisabled=true;//按钮不可用
letinterval=window.setInterval(()=>{
this.btnText=this.time+'s重新发送'
if((this.time--)<=0){
this.time=120;
this.btnText='发送验证码'
this.sendMsgDisabled=false;//按钮可用
window.clearInterval(interval);
}
},1000);
}
})

React

引用块内容

time=()=>{
this.setState({
times:this.state.times-1,
btnText:''+this.state.times+'s重新发送)',
//discodeBtn:false,
clearInterval:true
})
varsiv=setInterval(()=>{
this.setState({
times:this.state.times-1,
btnText:''+this.state.times+'s重新发送)',
//discodeBtn:false,
clearInterval:true
},()=>{
if(this.state.times===0){
clearInterval(siv);
this.setState({
times:60,
btnText:'发送验证码',
//discodeBtn:true,
clearInterval:false,
phone:false,
isDisabled:false
})
}
});
},1000);
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

基于vue、react实现倒计时效果

热门推荐

随机推荐