React注册倒计时功能的实现

2023-09-08 09:13:05 174

一、React版本

16.4.1

二、具体代码如下

设置state属性

constructor(props){
super(props);
this.state={
btnText:'获取验证码',
seconds:60,//称数初始化
liked:true//获取验证码文案
}
}

2.倒计时

//获取验证码
sendCode=()=>{
letsiv=setInterval(()=>{
this.setState({
liked:false,
seconds:this.state.seconds-1,
},()=>{
if(this.state.seconds==0){
clearInterval(siv);
this.setState({
liked:true,
secounds:60
})
}
});
},1000);
}

3.jsx代码




{getFieldDecorator('captcha',{
rules:[{required:true,message:'请输入短信验证码!'}],
})(

)}



{
this.state.liked
?
{this.state.btnText}
:
{this.state.seconds+'s后重新发送'}
}

明明很简单的，但是看网上有的代码搞得很复杂一样，当然也可以用react相关插件，不过我觉得这样更简洁。

ps：react获取服务器端时间倒计时

importReact,{Component}from'react'
importaxiosfrom'axios'

exportdefaultclassTimerextendsComponent{

constructor(props){
super(props)
this.state={
bool:false,
days:'0',
hours:'00',
minutes:'00',
seconds:'00'
}
}

componentDidMount(){
this.start()
}

asyncstart(){
this.timer&&clearTimeout(this.timer)//先清除一遍定时器，避免被调用多次
//发起任意一个服务器请求，然后从headers里获取服务器时间
letleftTime=awaitaxios.get('/').then(response=>{
returnnewDate(this.props.date).getTime()-newDate(response.headers.date).getTime()//服务器与倒计时的时间差
}).catch(error=>{
console.log(error)
return0//这里发送的服务器请求失败设为0
})

//倒计时
this.timer=setInterval(()=>{
leftTime=leftTime-1000
let{bool,days='0',hours='00',minutes='00',seconds='00'}=this.countdown(leftTime)
if(bool){//结束倒计时
clearTimeout(this.timer)
}
this.setState({
bool,
days,
hours,
minutes,
seconds
})
},1000)
}

/**
*倒计时
*@paramleftTime要倒计时的时间戳
*/
countdown(leftTime){
letbool=false
if(leftTime<=0){
bool=true
return{bool}
}
vardays=parseInt(leftTime/1000/60/60/24,10)//计算剩余的天数
varhours=parseInt(leftTime/1000/60/60%24,10)
if(hours<10){
hours='0'+hours
}
varminutes=parseInt(leftTime/1000/60%60,10)
if(minutes<10){
minutes='0'+minutes
}
varseconds=parseInt(leftTime/1000%60,10)
if(seconds<10){
seconds='0'+seconds
}
return{bool,days,hours,minutes,seconds}
}

componentWillUnmount(){
clearTimeout(this.timer)
}

render(){
let{bool,days,hours,minutes,seconds}=this.state
return(

{
bool?
活动已结束:

{days}天{hours}:{minutes}:{seconds}

}

)
}
}

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

React注册倒计时功能的实现

热门推荐

随机推荐